CSS3 动画详解
单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，可触发的方式有：
:hoever :focus :checked 媒体查询触发 JavaScript触发
过渡的小结：
transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成：
1）通过类似Flash动画中的帧来声明一个动画；
2）在animation属性中调用关键帧声明的动画。
注意：animation属性到目前位置得到了大多数浏览器的支持，但是，需要添加浏览器前缀！需要添加浏览器前缀！需要添加浏览器前缀！
（1）
animation-name：none为默认值，将没有任何动画效果，其可以用来覆盖任何动画 （2）animation-duration：默认值为0，意味着动画周期为0，也就是没有任何动画效果
（3）animation-timing-function：与transition-timing-function一样
（4）animation-delay：在开始执行动画时需要等待的时间
（5）animation-iteration-count：定义动画的播放次数，默认为1，如果为infinite，则无限次循环播放
（6）animation-direction：默认为nomal，每次循环都是向前播放，（0-100），另一个值为alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放
（7）animation-state：默认为running，播放，paused，暂停
（8）animation-fill-mode：定义动画开始之前和结束之后发生的操作，默认值为none，动画结束时回到动画没开始时的状态；forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；backwards，让动画回到第一帧的状态；both：轮流应用forwards和backwards规则。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>动画</title> <style> /*申明动画帧*/ @-webkit-keyframes cricle { 0%{ top:0; left:0; background:red; } 25%{ left:200px; top:0; background: #000; } 50%{ top:200px; left:200px; background: blue; } 75%{ top:200px; left:0; background: yellow; } 100%{ left:0px; top:0px; background: red; } } @keyframes cricle { 0%{ top:0; left:0; background:red; } 25%{ left:200px; top:0; background: #000; } 50%{ top:200px; left:200px; background: blue; } 75%{ top:200px; left:0; background: yellow; } 100%{ left:0px; top:0px; background: red; } } /*直来直回动画帧*/ @webkit-keyframes straight{ 0%{ left:0; background: #000; } 25%{ left: 400px; background: yellow; } 50%{ left: 800px; background: #000; } 75%{ left: 400px; background: red; } 100%{ left: 0; background: #000; } } @keyframes straight{ 0%{ left:0; background: #000; } 25%{ left: 400px; background: yellow; } 50%{ left: 800px; background: #000; } 75%{ left: 400px; background: red; } 100%{ left: 0; background: #000; } } .box{width:100px;height:100px; background: red; position:relative; /*动画*/ -webkit-animation-name:cricle;/*指定动画的名字 straight cricle*/ animation-name:cricle; -webkit-animation-duration:5s;/*指定动画时长*/ animation-duration:5s; -webkit-animation-timing-function:steps(5,start); /*动画播放方式 linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) steps(n,start) */ animation-timing-function:steps(5,start); -webkit-animation-delay:1s;/*指定动画开始时间以秒为单位*/ animation-delay:1s; -webkit-animation-iteration-count:infinite;/*指定动画播放的循环次数 infinite 无限循环*/ animation-iteration-count:infinite; -webkit-animation-direction:reverse;/*控制动画的播放方向 normal 默认正常播放 reverse动画方向播放 alternate奇数正偶反 alternate-reverse 奇反偶正*/ animation-direction:reverse; -webkit-animation-palay-state:running;/*设置动画播放的状态，暂停还是播放 paused running */ animation-palay-state:running; -webkit-animation-fill-mode:both;/*设置动画时间外属性 none默认值 动画在执行*/ animation-fill-mode:both; /*设置动画时间外属性 none默认值 动画在执行之前和之后不会有任何样式到目标元素 forwards 在动画结束之后，动画将应用该属性值 backwards 动画将应用子啊animatio-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值 both 动画遵循forward和backwards的规则，也就是说，动画会在两个方向上扩展动画属性 */ /* -webkit-animation: straight 5s ease-out 2s infinite reverse backwards; animation: straight 5s ease-out 2s infinite reverse backwards;*/ } </style> </head> <body> <div id="box" class="box"> </div> <input id="btn" type="button" onclick="pasused()" style="position:relative;left:600px;top400px;" value="暂停" > </body> <script type="text/javascript"> function pasused(){ var box = document.getElementById("box"); var btn = document.getElementById("btn"); if(btn.value=="暂停"){ box.style.animationPlayState="paused"; btn.value="开始"; }else{ box.style.animationPlayState="running"; btn.value="暂停"; } } </script> </html>
animation属性类似于transition，他们都是随着时间改变元素的属性值，其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果
