CSS3动画之二：Animations功能

最新推荐文章于 2025-04-01 23:56:21 发布

转载最新推荐文章于 2025-04-01 23:56:21 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lianjun/archive/2011/10/07/2200315.html

本文详细解析了网页动画中Animations与Transitions功能的区别，并通过实例展示了如何使用Animations功能实现复杂动画效果，包括关键帧的创建、动画属性的设置及动画循环播放的控制。

　　Animations功能与Transitions功能相同，都是通过改变元素的属性值来实现动画效果，不同之处是：Transitions功能只能通过改变指定属性的开始值与结束值，然后再这两个属性值之间进行平滑的过渡来实现动画效果。所以Transitions功能不能实现比较复杂的动画效果；Animations功能可以定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。

　　首先明白了Animations功能的工作原理，下面就通过一个实例来看一下Animations功能的用法：（到目前为止Safari 4+、Chrome 2+对Animations功能提供支持）。

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>Animations功能使用方法</title>
 6         <style>
 7         div { 
 8             background-color: red;
 9         }
10         @-webkit-keyframes mycolor {
11             0% {
12                 background-color: red;
13             }
14             40% {
15                 background-color: darkblue;
16             }
17             70% {
18                 background-color: yellow;
19             }
20             100% {
21                 background-color: red;
22             }
23         }
24         div:hover {
25             -webkit-animation-name: mycolor;
26             -webkit-animation-duration: 5s;
27             -webkit-animation-timing-function: linear;
28         }
29         </style>
30     </head>
31     <body>
32         <div>动画文字</div>
33     </body>
34 </html>

　　分析一下以上代码，主要有如下几个关键帧，通过这些关键帧之间的平滑过渡完成了动画效果：

1. 开始帧：0% { background-color: red; } 这时候，在Chrome中，div元素的背景色为红色；

2. 背景色为深蓝色的关键帧：40% { background-color: darkblue; } 这时候，在Chrome中，div元素的背景色为深蓝色；

3. 背景色为黄色的关键帧：70& { background-color: yellow; } 在整个动画过程的70%处这帧的背景色为黄色；

4. 结束帧：100% { background-color: red; } 整个动画介绍的最后一帧为结束帧，结束帧之后，元素的属性不再发生变化，结束帧与开始帧的页面显示完全相同，div元素的背景色都是红色。

　　创建关键帧的方法是：@keyframes /关键帧集合名/ { 创建关键帧的代码 }，上面的例子当中关键帧集合的名称是“mycolor”；如果是Safari或Chrome，要在属性前加上“-webkit-”前缀，如果是Firefox，则加上“-moz-”前缀。像“@-webkit-keyframes”或“@-moz-keyframes”这样。

　　创建关键帧的代码类似这样：40% { 本关键帧的样式代码 }，本例中的代码：40% { background-color: darkblue; }，这里的40%表示改帧位于整个动画过程的40%处，开始帧为0%，结束帧为100%。关键帧可以在0%-100%之间任意设置。本例在70%处设置了一个关键帧，背景色为黄色。这样div元素的背景色就在红色，深蓝色，黄色这三个颜色之间平滑过渡。

　　关键帧的集合创建完成后，就要在元素的样式中来使用它，通过div元素的伪类:hover可以来触发执行动画，如果是其他元素，比如<input type="text">还可以通过:focus伪类触发来执行动画。代码如下：

div:hover {
    -webkit-animation-name: wobble;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
}

animation-name属性中指定关键帧集合的名称，animation-duration属性中指定完成动画所用的时间，animation-timing-function属性中指定实现动画的方法。Transitions功能可以实现多个属性值同时改变的动画，那么Animations功能可不可以实现多个属性值同时改变的动画呢？当然可以，下面看一个示例，基于上面那个示例修改而来，在动画中，不仅完成三种背景色之间的平滑过渡，而且在背景色为深蓝色的关键帧中，让div元素顺时针旋转30度，在背景色为黄色的关键帧中，让div元素逆时针旋转30度。代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>Animations功能使用方法</title>
 6         <style>
 7         div { 
 8             top: 100px;
 9             position: absolute;
10             width: 500px;
11             background-color: yellow;
12         }
13         @-webkit-keyframes 'wobble' {
14             0% {
15                 background-color: red;
16                 -webkit-transform: rotate(0deg);
17             }
18             40% {
19                 background-color: darkblue;
20                 -webkit-transform: rotate(30deg);
21             }
22             70% {
23                 background-color: yellow;
24                 -webkit-transform: rotate(-30deg);
25             }
26             100% {
27                 background-color: red;
28                 -webkit-transform: rotate(0deg);
29             }
30         }
31         div:hover {
32             -webkit-animation-name: wobble;
33             -webkit-animation-duration: 5s;
34             -webkit-animation-timing-function: linear;
35         }
36         </style>
37     </head>
38     <body>
39         <div>动画区域</div>
40     </body>
41 </html>

在元素样式代码中，可以通过animation-iteration-count属性来制定动画的播放次数，也可以通过对该属性指定infinite属性值来让动画循环播放。代码如下：

div:hover {
	-webkit-animation-name: wobble;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

如果鼠标移到div元素上，动画将不停的循环播放，直到鼠标移开。如果将animation-iteration-count属性的值设定为一个整数值，那么动画播放的次数就是这个整数值。如果吧鼠标停留在div元素上的样式去掉，而是把样式的代码写在div元素本身的样式中去，就是把div:hover中的hover伪类去掉。那么动画将在页面打开时进行播放。

转载于:https://www.cnblogs.com/lianjun/archive/2011/10/07/2200315.html