因公司业务需要在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。