animation 简写属性CSS3
animation-name 规定@keyframes动画名称
animation-duration 动画花费时间 默认0
animation-delay 动画何时开始/秒（多少秒开始）
animation-timing-function 动画速度曲线
linear 匀速 从头到尾一样
ease 默认，低速开始，加快，结束前变慢
ease-in 从低速开始
ease-out 以低速结束
animation-iteration-count 播放次数 infinite无限
（动画-反复-计算：播放次数）
用在：hover后面
animation-play-state 是否暂停
paused 暂停
running 正常播放
animation-direction （播放）之后逆向播放
轮流反方向 alternate
默认播放正常单方向
animation-fill-mode 保持最后一个属性值
none 不改变(默认值)
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
综合所有
animation：name（名字） duration（花费时间） timing-function（速度曲线） delay（何时开始） iteration-count（次数） directing（逆向）
动画启动
@keyframes name{
from{left：0；} 开始属性值
To {left：-400px；}结束属性值
}
@keyframes name {keyframes-selector {css-styles;}}
animationname 定义动画的名称。
keyframes-selector 动画时长的百分比。
0-100%
from（与 0% 相同） to（与 100% 相同）
可以只有to
css-styles 一个或多个合法的 CSS 样式属性。
动画事件：
动画开始：
obj.addEventListener("webkitAnimationStart", fn);
obj.addEventListener("animationstart", fn);
动画执行过程中触发：
obj.addEventListener("webkitAnimationIteration", fn);
obj.addEventListener("animationiteration", fn);
动画结束是触发：
obj.addEventListener('webkitAnimationEnd',fn);
obj.addEventListener('animationend',fn);
rotateY(-.5turn)
来段代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{ padding: 0; margin: 0; list-style: none;} #box{ width: 440px; height: 110px; border: 1px solid red; margin: auto; position: relative; overflow: hidden; } #pic{ width: 880px; position: absolute; /* animation-name: onr; 名字 animation-duration: 5s; 花费时间速度 animation-timing-function:linear; 运动速度曲线 animation-delay: 1s; 何时开始 animation-iteration-count:infinite; 播放次数 animation-direction:alternate; 一次后逆向播放 */ animation: onr 5s linear infinite; } #pic:hover{animation-play-state:paused;} #pic li{ width: 100px; height: 100px; margin: 5px; float: left; } @keyframes onr { from{ left: 0;} to{left: -440px} } </style> </head> <body> <div id="box"> <ul id="pic"> <li style="background: blue"></li> <li style="background: yellowgreen"></li> <li style="background: yellow"></li> <li style="background: darkorange"></li> <li style="background: blue"></li> <li style="background: yellowgreen"></li> <li style="background: yellow"></li> <li style="background: darkorange"></li> </ul> </div> </body> </html>