css3动画效果

一、animation实现动画效果主要由两部分组成：

1、通过类似flash动画中关键帧声明一个动画

2、在animation属性中调用关键帧声明的动画

1、关键帧属性 @keyframes 声明一个关键帧属性的动画

例如，在css中书写以下代码

@keyframes myani{
        0%{
            background-color:white;
        margin-left:0px;
    }
    50%{
            background-color:black;
        margin-left:100px;
    }
    100%{
            background-color:white;
        margin-left:0px;
    }
}

上面的示例效果还可以合并，用逗号隔开，如下所示：

eg. @keyframes myani{
        0%,100%{
            background-color:white;
        margin-left:0px;
    }
    50%{
            background-color:black;
        margin-left:100px;
    }
}

0%指的是动画起始的位置；100%指的是动画结束的位置

创建关键帧动画，还可以使用关键字

eg. @keyframes myani{
        from{
            background-color:white;
        margin-left:0px;
    }
    to{
            background-color:black;
        margin-left:100px;
    }
}

2、创建animation-name 目的：调用关键帧动画

属性值有两个：

none 默认值，没有指定任何动画

INDEX 是由 @keyframes指定创建的动画名称

eg. div{
        animation-name:myani;
}

3、animation-duration 设置动画播放的时间

eg. div{
        animation-name:myani;
    animation-duration：1s;
}

4、animation-timing-function 设置缓动

属性值请参考transition-timing-function的属性值

5、animation-delay 设置延迟时间

eg. div{
        animation-name:myani;
    animation-duration：1s;
    animation-delay：1s;
}

6、animation-iteration-count 设置循环次数

属性值有两个，如下所示：

次数 默认值为1

infinite 表示无限次循环

eg. div{
        animation-name:myani;
    animation-duration：1s;
    animation-delay：1s;
    animation-iteration-count：infinite；
}

7、animation-direction 设置播放动画的方向进行交替

属性值有两个，如下所示：

normal 默认值，每次正序播放

alternate 一次正序播放、一次逆序播放，如此循环

解析：假如动画播放是由快到慢，若设置normal，便一直是由快到慢；若设置alternate，则会先

由快到慢，然后再由慢到快，如此循环。

8、animation-play-state 设置动画停止/开始播放

属性值如下所示：

paused 规定动画已停止

running 规定动画正在播放

eg. div{
        animation-name:myani;
    animation-duration：1s;
    animation-delay：1s;
    animation-play-state：paused;     动画不进行播放
}

9、animation-fill-mode 设置动画在播放之前或之后，其动画效果是否可见

该属性可设置多个属性值，由逗号分隔，属性值如下所示：

none 默认值，表示按照预期进行和结束

forwards 动画结束后继续应用最后关键帧的位置，既不返回

backforwards 动画结束后迅速应用起始关键帧位置，即返回

both 根据情况产生forwards或backforwards的效果

//这个both属性和动画执行的次数有关，即于animation-iteration-count有关，动画停在

哪就是哪（开头或结尾）

10、animation简写形式

eg. div{
        animation:myani 1s ease 2 alternate 0s both;
}

animation子属性的顺序为：animation-name、animation-duration、animation-timing-function、

animation-iteration-count、animation-direction、animation-delay、animation-fill-mode

注意：animation的使用需要浏览器的版本较高，使用的话，需要在标准格式前面加上带前缀的格式。