玩转CSS3动画

因公司业务需要在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，就必须添加动画属性才能让动画起作用。

动画属性做两件事：

1. 将@keyframes分配给要动画的元素。
2. 定义它是如何动画的。

动画属性被添加到您想要动画的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动画支持的情况如下：

测试代码请参考：https://gitee.com/mogoweb/css3.git。

参考

1. CSS Animations
2. CSS Animation for Beginners
3. Using CSS animations