animation
这个属性是css3里的，具体的浏览器兼容性大家可以去Can I Use里面查看。
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state ;
定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。animation-play-state 指定动画是否正在运行或已暂停。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
animation-timing-function
animation-duration、animation-timing-function、animation-delay和transition里面的transition-duration、transition-timing-function、transition-delay功能一样就不再多说了。
但是animation-timing-function属性里animation比transition多一个steps取值，steps函数可以实现分步过渡。steps 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
这里有一个例子，可以看到steps函数的用处：steps.html
还可以参考：steps()用法详解
animation-name
animation-name属性是指keyframes关键字定义的名称。比如：
p:hover {
animation: 1s rainbow;
}
当鼠标悬停在p元素上时，会产生名为rainbow的动画效果，持续时间为1秒。然后我们定义rainbow效果：
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）。如果有需要，还可以插入更多状态。参考实例：animation.html
keyframes
keyframes关键字写法还可以这样写：
@keyframes rainbow {
from { background: #c00 }
50% { background: orange }
to { background: yellowgreen }
}
from代表0%，to代表100%。还可以省略某个状态，浏览器会自动推算中间状态：
@keyframes rainbow {
50% { background: orange }
to { background: yellowgreen }
}
@keyframes rainbow {
to { background: yellowgreen }
}
甚至，可以把多个状态写在一行：
@keyframes pound {
from，to { transform: none; }
50% { transform: scale(1.2); }
}
animation-iteration-count
默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。
p:hover {
animation: 1s rainbow infinite;
}
也可以指定动画具体播放的次数：
p:hover {
animation: 1s rainbow 3;
}
这里还有一个心脏跳动的例子。
animation-direction
动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性，可以改变这种行为。默认情况是，animation-direction等于normal：
p:hover {
animation: 1s rainbow 3 normal;
}
animation-direction可以取以下值：
animation-fill-mode
动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，可以使用animation-fill-mode属性。注意这个属性可以不用在动画的循环播放中，而animation-direction属性一般用在动画的循环播放中：
p:hover {
animation: 1s rainbow forwards;
}
animation-fill-mode可以使用下列值：
- none：默认值，回到动画没开始时的状态。
- forwards: 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
- backwards：让动画回到第一帧的状态。
- both？: 根据animation-direction轮流应用forwards和backwards规则。
animation
同transition一样，animation也是一个简写形式。各个属性的顺序也可以更改，但是animation-duration和animation-delay这两个属性之间的顺序必须是一前一后。
p:hover {
animation: 1s 1s rainbow linear 3 forwards normal;
}
animation-play-state
规定动画正在运行还是暂停。有时，动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态。如果想让动画保持突然终止时的状态，就要使用animation-play-state属性。它有两个取值paused(停止)、running(运行)。
参考实例：animation1.html
总结
目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀：
p:hover {
-webkit-animation: 1s rainbow;
animation: 1s rainbow;
}
@-webkit-keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
相关阅读
9.4 ScaleAnimation类：尺寸变化动画类ScaleAnimation类是Android系统中的尺寸变化动画类，用于控制View对象的尺寸变化，该类继承于A
补间动画AnimationSet中放入TranslateAnimation和Scal
今天开发的时候碰到这样一个问题:使用补间动画同时进行平移和缩放操作 AnimationSet animationSet = new AnimationSet(false); T
android开机动画bootanimationbootanim服务源码：frameworks/base/cmds/bootanimation/bootanim.rcservice bootanim /system/bin/b
Android 补间动画之平移动画TranslateAnimation
Android动画系列 博客导航： 1.介绍： Android补间动画之平移动画，在实际的开发过程中，其实有好多地方需要用到平移动画，这是对于平
安卓手机开机动画bootanimation.zip文件制作以及注意
刚刚将原生Android系统开机logo和开机动画做了调整，为此耗费了接近半天的时间，碰到了很多问题，幸好最终达成了目的。一，首先说一下boo