CSS3中动画效果Transitions与Animations的区别

在CSS3中，如果我们使用动画功能，可以使页面上的文字或图像具有动画效果，可以使我们的页面更加生动具有吸引力。在CSS3中我们可使用的动画功能有两种，Transitions与Animations。下面我们来看看它们两者的区别。

首先来看Transitions功能，它的属性有：

transition-property ：指定需要平滑过渡的属性

transition-duration ：设定平滑过渡使用的时间

transition-timing-function ：设定平滑过渡使用的方法

transition-delay ：设置平滑过渡开始前的延迟时间

在一行样式代码中定义transitions动画时可以写成 transition ：property duration timing-function delay;

下面将实现一个简单的效果，将一个div的宽在鼠标移入后1s内从宽100px变成200px，背景色从黄色平滑过渡到浅蓝色，延迟时间为2s，代码清单如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta charset="utf-8" content="text/html" http-equiv="content-type">
 5 <title></title>
 6 <style type="text/css">
 7 
 8     div {
 9         width: 100px;
10         height: 100px;
11         background: #ffff00;
12         transition: width 1s linear 2s,background-color 1s linear 2s;
13     }
14     div:hover{
15         width: 200px;
16         background-color: #003366;
17     }
18     
19 </style>
20 </head>
21 <body>
22    <div>示例</div>
23 </body>
24 </html>

接下来是Animations功能，它的用法：首先我们需要创建关键帧的集合 @keyframes 关键帧集合名{ 创建关键帧的代码（如40% { 本关键帧中的样式代码 }） } ，我们创建好关键帧后需要在元素的样式中使用该关键帧的集合，如何使用呢？

下面是我们可以使用的属性：

animation-name ：指定我们使用的关键帧集合的名字

animation-duration ：指定完成动画需要花费的时间

animation-timing-function ：指定实现动画的方法，可指定的属性为linear（动画开始与结束以同样的速度进行改变）、ease-in（先慢后快）、ease-out（先快后慢）、ease（先慢后快再慢）、ease-in-out（跟ease一样）

animation-delay ：指定延迟多少秒或毫秒开始执行动画

animation-iteration-count ：指定动画执行的次数（可指定为infinite即无限次）

animation-direction ：指定动画的执行方向，可指定的属性值为normal（初始值即动画完毕后回到初始状态）、alternate（交替更改执行的方向）、reverse（反方向执行动画）、alertnate-reverse（反方向开始交替执行动画）

在一行代码中定义animations动画可以写成 animation ：keyframe的集合名称 duration timing-function delay iteration-count direction;

下面实现一个简单的示例，将一个div完成四个背景色的平滑过渡，而且在背景色为黄色的关键帧中让div元素顺时针旋转30度，在背景色为绿色的关键帧中让div元素逆时针旋转30度，动画的延迟时间为2s。代码清单如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta charset="utf-8" content="text/html" http-equiv="content-type">
 5 <title></title>
 6 <style type="text/css">
 7 
 8     div {
 9         width: 100px;
10         height: 300px;
11         color: white;
12         background-color: black;
13     }
14     @keyframes mycolor {
15         0% {
16             background-color: red;
17             transform: rotate( 0deg );
18         }
19         40% {
20             background-color: yellow;
21             transform: rotate( 30deg );
22         }
23         70% {
24             background-color: blue;
25             transform: rotate( -30deg );
26         }
27         100% {
28             background-color: green;
29             transform: rotate( 0deg );
30         }
31     }
32     div:hover {
33         animation:mycolor 5s linear 2s;
34     }
35     
36 </style>
37 </head>
38 <body>
39      <div>示例</div>
40 </body>
41 </html>

从上面的例子我们可以得出Transitions动画功能与Animations动画功能的区别：虽然它们两者都是通过改变元素的属性值来实现动画效果，但是Transitions只能通过指定属性的开始值与结束值，然后在这两者之间进行平滑过渡的方式来实现动画的效果，因此不能实现较复杂的动画效果；而Animations功能可以通过定义多个关键帧以及每个关键帧中元素的属性值来实现复杂的动画效果。