动画本质上是增强的过渡
动画分两部分，即动画属性定义动画形式，第二部分使用@key-frames规则创建，定义动画是什么样的
1.浏览器支持情况
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。
2.动画属性
animation-delay 设置动画开始前的延迟，值为时间，单位ms
animation-direction 设置动画循环播放的时候是否反向播放，值normal表示每次重复都向前播放，如果重复播放多次，每次动画都恢复初始状态，从头开始播放；值alternate表示动画先向前再反向播放
animation-duration 动画播放持续时间
animation-iteration-count 动画播放次数 infinite或者数值
animation-name 指定动画名称 none或字符串
animation-play-state 允许动画暂停paused或者重新播放running
animation-timing-function 中间值，类似过渡
animation 简写属性
animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count
动画：命名 持续时间 中间值 延迟时间 播放次数
3.@key-frames
目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
用法：
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
语法：
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 描述 |
|---|---|
| animationname | 必需。定义动画的名称。 |
| keyframes-selector |
必需。动画时长的百分比。 合法的值：
|
| css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
注：与过渡相比，动画的一个优势是你可以将其应用到初始布局，即页面已加载就可以产生动画。