CSS3动画之一：Transitions功能 CSS3动画之二：Animations功能

2023-04-26 13:06•css•阅读 4960

在页面里加入些动画，可以是页面更加生动活泼，使用CSS3的动画功能，可以使页面上的文字或图像具有动画功能。比如说背景色从一种颜色，平滑的过度到另一种颜色。CSS3中的动画功能有两种，Transitions和Animations。这两种功能都可以通过改变CSS中的属性值来产生动画效果。本文简单介绍一下Transitions功能的使用方法。

　　到目前为止，支持CSS3中的Transitions功能的浏览器有：Firefox 4+ 、Opera 10+、Safari 3.1+、Chrome 8+等，transitions属性的使用方法如下：

　　transition: property duration timing-function

　　但是，在书写CSS代码的时候，如果是Firefox浏览器，需要书写成“-moz-transition”的形式；如果是Opera浏览器，需要书写成“-o-transition”的形式；如果是Safari或者Chrome浏览器，则写成“-webkit-transition”的形式。

　　前面说了，Transitions和Animations都是通过改变CSS中属性的值来产生动画效果的，所以，property表示需要改变的属性， duration表示在多长时间内完成动画，也就是动画执行的时间，timing-function表示通过神马方法进行动画。

　　下面看一个例子来演示一下Transitions功能的动画效果，页面中一个div元素，背景色为黄色，用过hover属性指定当鼠标指针停留在div元素上时背景色变为浅蓝色，通过transition属性指定：当鼠标指针移动到div元素上时，在1s钟内div元素的背景色从黄色平滑过渡到浅蓝色。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>Transitions功能用法</title>
 6         <style>
 7         div { 
 8             background-color: #ff0;
 9             -webkit-transition: background-color 1s linear;
10             -moz-transition: background-color 1s linear;
11             -o-transition: background-color 1s linear;
12         }
13         div:hover {
14             background-color: #0ff;
15         }
16         </style>
17     </head>
18     <body>
19         <div>鼠标放上来，看我的背景色</div>
20     </body>
21 </html>

　　可以看到，当鼠标移到div元素上时，背景色从黄色变绿色然后边浅蓝色，这样的平滑过渡效果，在CSS2中一般可以用jQuery去实现。如今采用CSS3的Transitions功能就方便多了。

　　还有一种用法，就是把transition的三个属性分开写，写成: transition-proterty属性, transition-duration属性, transition-timing-function属性。这三个属性的指定方法与含义与transition属性中的三个参数的含义及指定方法完全相同，是一样的。代码如下

transition-property: background-color;

transition-duration: 1s;

transition-timing-function: linear;

　　当然，针对不同的浏览器，前面要加上相应的前缀。在这儿就不一一写出了。

刚才这个例子只是改变了一个属性值，那么Transitions功能可不可以同时改变多个属性值呢？当然可以，why not？下面把刚才的例子稍微修改一下：一个div元素，背景色为黄色，字体颜色为黑色，宽度为400px，通过hover属性指定当鼠标指针停留在div元素上时背景色变为浅蓝色，字体为白色，宽度增加到500px。通过transition属性指定当鼠标指针移到到div元素上时在1s钟的时间内完成这几个属性值的变化即平滑过渡。

代码清单：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>Transitions功能用法</title>
 6         <style>
 7         div { 
 8             background-color: #ff0;
 9             color: #000;
10             width: 400px;
11             -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
12             -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
13             -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
14         }
15         div:hover {
16             background-color: #0ff;
17             color: #fff;
18             width: 500px;
19         }
20         </style>
21     </head>
22     <body>
23         <div>鼠标放上来，看我的背景色,文字颜色和宽度</div>
24     </body>
25 </html>

　　和预计的一样，背景色平滑过渡的时候，文字颜色也在平滑过渡，而宽度也渐渐的从400px变为500px。比起以前直接hover是不是炫多了？

使用Transitions功能实现动画的缺点是只能指定属性的开始值与终点值，然后再这两个属性值之间实现平滑过渡，不能实现更为复杂的动画效果，在CSS3中，除了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伪类去掉。那么动画将在页面打开时进行播放。

　　首先明白了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%处这帧的背景色为黄色；

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

 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;

}

上一篇 »CSS3 Loading，加载动画效果
下一篇 »css3 简单动画

CSS3动画之一：Transitions功能 CSS3动画之二：Animations功能

相关推荐

CSS3关键帧动画——时钟

prefix css3漏斗Loading加载动画

css3 鼠标悬浮动画效果

HTML5学习之CSS3动画

CSS3动画设置后台登录页背景切换图片

jQuery插件css3动画模拟confirm弹窗

css3动画在动作结束时保持该状态不变的解决办法

CSS3 Animation 动画