因公司业务需要在Android WebView上增加对CSS3动画的支持，所以就先研究了一下CSS Animations。这篇文章主要站在前端开发人员的角度，试图阐述什么是CSS动画、包含哪些关键要素以及如何编写代码实现动画。先把这些捋清楚了，才好去考虑如何实现。
首先，需要理解的是，CSS animations仍处在Working Draft阶段，这也意味着并非所有的浏览器都支持CSS animations，在使用该特性之前，请确定所面向的平台是否支持。
桌面平台浏览器内核对CSS animations的支持情况如下：
移动平台浏览器内核对CSS animations的支持情况如下：
什么是 CSS3 动画？
CSS3动画就是让元素逐渐从一种风格变为另一种风格。您可以根据需要更改任意数量的CSS属性，次数没有限制。要使用CSS动画，您必须首先为动画指定一些关键帧。关键帧保存元素在特定时间具有的样式。
动画的主要组成部分
CSS动画由两个基本部分组成：
- 关键帧 - 定义动画的阶段和样式。
- 动画属性 - 将@keyframes分配给一个特定的CSS元素并定义它如何动画。
关键帧(Keyframes)
关键帧是CSS动画的基础。他们定义动画时间轴每个阶段的动画效果。每个@keyframes组成如下：
- 动画名称：描述动画的名称，例如bounceIn。
- 动画的阶段：动画的每个阶段都以百分比表示。0％表示动画的开始状态。100％表示动画的结束状态。可以在两者之间添加多个中间状态。
- CSS属性：为动画时间轴的每个阶段定义的CSS属性。
我们来看看一个简单的@keyframes，我把它命名为“bounceIn”。该@keyframes有三个阶段。在第一阶段(0％)，使用CSS变换比例，该元素处于不透明度0并缩小至默认大小的10％。在第二阶段(60％)，元素会完全不透明，并且会增长到默认大小的120％。在最后阶段(100％)，它会略微缩小并恢复到其默认大小。
@keyframes bounceIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}动画属性(Animation Properties)
一旦定义了@keyframes，就必须添加动画属性才能让动画起作用。
动画属性做两件事：
- 将@keyframes分配给要动画的元素。
- 定义它是如何动画的。
动画属性被添加到您想要动画的CSS选择器（或元素）。您必须添加以下两个动画属性才能使动画生效：
- animation-name：动画的名称，在@keyframes中定义。
- animation-duration：动画的持续时间，以秒（例如5s）或毫秒（例如200ms）为单位。
继续上面的bounceIn示例，我们将animation-name和animation-duration添加到想要动画的div上。
div {
animation-duration: 2s;
animation-name: bounceIn;
}添加了@keyframes和动画属性，我们就得到了一个简单的动画！
关于前缀
截至2014年底，许多基于Webkit的浏览器仍然使用带-webkit前缀版本的animations、keyframes和转换。为了在这些浏览器上运行，您需要包含不带前缀和带WebKit前缀的代码。（为了简单起见，在示例中使用不带前缀的版本。）
使用WebKit前缀的关键帧和动画：
div {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceIn { /* styles */ }
@keyframes bounceIn { /* styles */ }为了让您的生活更轻松，请考虑使用Bourbon，这是一个Sass mixin库，其中包含适用于所有现代浏览器的前缀。以下是使用Bourbon生成浏览器特定前缀的动画和关键帧的简单方法：
div {
@include animation(bounceIn 2s);
}
@include keyframes(bouncein) { /* styles */}其他动画属性
除了所需的动画名称和动画持续时间属性之外，还可以使用以下属性进一步自定义和创建复杂动画：
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Animation-timing-function
animation-timing-function定义动画的速度曲线或步长。您可以使用以下预定义时间选项指定时间：ease, linear, ease-in, ease-out, ease-in-out, initial, inherit。
如果没有指定其他值，默认值是ease，代表开始慢、加速、然后减慢。
CSS语法:
animation-timing-function: ease-in-out;简化语法（推荐）：
animation: [animation-name] [animation-duration] [animation-timing-function];
animation: bounceIn 2s ease-in-out;Animation-Delay
Animation-Delay允许您指定动画（或动画片段）何时开始。一个正值（如2s）会在触发后2秒开始动画。 该元素在此之前将保持静止状态。负值（如-2s）将立即开始动画，持续2秒。
该值以秒（s）或毫秒（mil）定义。
CSS语法:
animation-delay: 5s;简化语法（推荐）：
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay];
animation: bounceIn 2s ease-in-out 3s;Animation-iteration-count
animation-iteration-count：指定动画播放的次数。可能的值是：
- 代表循环次数的数字 (缺省值是1)
- infinite - 无限次循环
- initial - 设置循环次数为缺省值
- inherit - 从父元素继承该值
CSS语法:
animation-iteration-count: 2;简化语法（推荐）：
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count];
animation: bounceIn 2s ease-in-out 3s 2;Animation-direction
animation-direction属性指定动画是应该前进、后退还是交替循环播放。
可能的值是：
normal（默认） - 动画往前播放。在每个循环中，动画重置为开始状态（0％）并再次播放（至100％）。
reverse - 动画往后播放。在每个循环中，动画重置为结束状态（100％）并向后播放（至0％）。
alternate - 动画每个周期改变一次方向。在每个奇数循环中，动画往前播放（0％到100％）。在每个偶数周期中，动画往后播放（100％至0％）。
alternate-reverse - 动画每个周期改变一次方向。在每个奇数周期中，动画都会向后播放（100％至0％）。在每个偶数周期中，动画都往前播放（0％或100％）。
CSS语法:
animation-direction: alternate;简化语法（推荐）：
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction];
animation: bounceIn 2s ease-in-out 3s 3 alternate;Animation-fill-mode
Animation-fill-mode指定在动画播放之前或之后动画样式是否可见。这个属性有点令人困惑，但一旦明白它将非常有用。
默认情况下，在动画开始之前（如果存在animation-delay）或动画完成后，动画不会影响元素的样式。 动画填充模式属性可以用以下可能的值覆盖此行为：
- backwards - 在动画之前（动画延迟期间），初始关键帧（0％）的样式应用于元素。
- forwards - 动画完成后，最终关键帧中定义的样式（100％）由元素保留。
- both - 动画将遵循向前和向后的规则，在动画之前和之后扩展动画属性。
- normal（默认） - 在动画之前或之后，动画不会将任何样式应用于元素。
CSS语法:
animation-fill-mode: forwards;简化语法（推荐）：
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode];
animation: bounceIn 2s ease-in-out 3s 3 forwards;Animation-play-state
Animation-play-state指定动画是播放还是暂停。恢复已暂停的动画会从动画暂停的地方开始。
可能的值是：
- playing - 动画正在运行
- paused - 动画当前已暂停
示例：
.div:hover {
animation-play-state: paused;
}测试结果
使用Android 4.3系统进行测试，webkit内核浏览器对CSS3动画支持的情况如下：
| 属性 | 是否支持 |
|---|---|
| animation | 是 |
| keyframes | 是 |
| animation-name | 是 |
| animation-duration | 是 |
| animation-timing-function | 是 |
| animation-delay | 是 |
| animation-iteration-count | 是 |
| animation-direction | 只支持normal属性值，其它值忽略 |
| animation-fill-mode | 是 |
| animation-play-state | 否 |
测试代码请参考：https://gitee.com/mogoweb/css3.git。
参考
