可以让页面中指定的米素根据设定的方式“动”起来，运用的是人视觉延迟的原理，延续地在上一张图消逝之前插入下一张。

animation属性值

1.animation-name

工具的动画名称，以便后续设置动画属性时使用

默以为none，若是设置的话即为要设置动画的关键帧的名字

后续对该米素设置动画时，要用@keyframes，设置起始的样式（from）和终止的样式（to）

 2.animation-duration

动画连续的时间（播放完成所花时间）

默认值为0，可设置单米为秒（s）或毫秒（ms）

3.animation-timing-function

动画的过分方式

常用的有：linear（线性过渡）、ease（平滑过渡）、ease-in（由慢到快）、ease-out（由快到慢）、ease-in-out（由慢到快再到慢）

若有庞大需求，要设置贝塞尔曲线（cubic-bezier（数值1，数值2，数值3，数值4）），其中四个数值局限为0-1

4.animation-delay

动画最先前等待时间（该时间不包括在动画放映时间内）

默认值为0，可设置单米为秒（s）或毫秒（ms），如设置负值则立刻最先动画

注：设置的时间带有小数点时，建议省去整数部门，如0.5写成.5

5.animation-interation-count

动画循环次数

值为数字，默以为1，也可设置infinite（无限循环）

6.ainmation-direction

动画循环时的偏向

可设置的值有：none（保留原有样式，默认值）、reverse（反向）、alternate（先正常再反向并交替举行）、alternate-reverse（先反向再正常并交替举行）

其中alternate和alternate-reverse必须在循环次数不为1时才生效

7.animation-fill-mode

动画不播放（已经放完/有延迟没播放）时的米素样式

可设置的值有：none（没有样式，默认值）、forwards（结束时状态）、backwards（最先时状态）、both（同时设置最先和结束时状态）

8.animation-play-state

动画状态，即播放/暂停

可设置的值有：running（播放，默认值）、pause（暂停）

9.animation的简写

其中必须设置name和duration

剖析时，默认把第一个字符串属性值剖析为name，第一个带有时间的属性值剖析为duration，之后一个带有时间的属性值剖析为delay

/*根据每个米素来写的动画属性*/
div{
    width:100px;height:100px;
    animation-name:outside;
    animation-duration:2s;        
    animation-timing-function:linear;
    animation-delay:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate-reverse;
    animation-fill-mode:forwards;
    animation-play-state:pause;
}
@keyframes outside{
    from{transform:translateY(0px);}
    to{transform:translateY(1000px);}
}

keyframes

通过控制关键帧来改变动画的播放效果，对手机端必须加上-webkit-

其中0%和100%可用from和to取代

div{
    width:100px;height:100px;background:black;
    animation:here 5s linear infinite alternate-reverse;
}
@-webkit-keyframes here{
       0% {capacity:0;}
     25% {capacity:0.25;}
     50% {capacity:0.5;}
     75% {capacity:0.75;}
    100% {capacity:1;}
}

链接: http://www.fly63.com/article/detial/4402