一，animation属性
1.在css3中定义了新属性animation用于制作动画效果
2.一个完整的动画效果由animation属性和@keyframes动画帧组成。
二，animation子属性
1.animation是一个简写属性，包含了其他子属性
（1）animation-name：规定动画名称
（2）animation-duration：规定动画完整执行的时长
（3）animation-timing-function：规定动画的执行曲线
（4）animation-delay： 规定动画的开始之前的延迟
（5）animation-iteration-count： 规定动画执行的次数
（6）animation-direction：规定动画是否应该轮流反向播放动画，默认normal
（7）animation-fill-mode： 规定动画时间之外的状态
（8）animation-play-state：规定动画是运行还是暂停。
2.注意至少定义animation-name和animation-duration两项CSS3动画属性，并将它绑定到某个选择器，否则不会产生动画效果。
三 ，@keyframe规则定义动画帧
1.@keyframes规则用于创建动画帧。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
2.使用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。0%是动画的开始，100%是动画的完成。
div{animation: changeBgColor 2s ease-in-out}@keyframes changeBgColor{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}
四，常用动画库
1.animate.css
五，兼容
1.Safari和Chrome支持替代的-webkit-animation属性。Internet Explorer 9以及更早的版本不支持animation属性
