CSS3动画

一.动画的使用

制作动画分两步：

（1）定义动画  （2）调用动画

1.用@keyframes定义动画

@keyframes 动画名称 {

        0% {

                width:100px;(可以改变)

        }

        100% {

                width：200px；(可以改变)

        }

}

2.元素使用动画

div {

        width:200px;                                             width，height，background-color，margin都可

        height:200px;                                              改变。

        background-color:blue;

        margin:100px auto;

        animation-name:动画名称；

        animation-duration:持续时间；

}

3.动画序列

（1）0%是动画的开始，100%是动画的完成，这样的规则就是动画序列

（2）在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果

（3）动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式，任意多的次数

（4）用百分比来规定变化发生时间，或用关键词“from”“to”等同于0%和100%

二. 动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state
animation-name	规定@keyframes动画的名称（必须写）
animaton-duration	规定动画完成一个周期所花费的时间（秒或毫秒），默认是零
animation-timing-function	规定动画的速度曲线，默认是ease
animation-delay	规定动画何时开始，默认是零
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite（无限）
animation-direction	规定动画是否在下一周期逆向播放，默认是normal，altermate逆播放
animation-play-state	规定动画的运行与暂停，默认是running，还有pause（暂停）
animation-fill-mode	规定动画结束后状态，保持结束的状态forwards，回到起始backforwards

三.动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的标志

四.速度曲线细节

值	描述
linear	动画从头到尾的速度是相同的，匀速
ease	默认效果。动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-in-out	动画以低速结束
steps()	分几步完成动画