CSS3之动画

CSS3中的动画分为transition和animation，这两个都能通过改变CSS中的属性值来产生动画效果。区别是：transition支持从一个属性值平滑过渡到另一个属性值，animation支持通过关键帧的指定来在页面上产生更复杂的动画。

1. transition

transition通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。用法如下：

transition: property duration timing-function

其中property表示对哪个属性进行平滑过渡，duration表示在多长时间内完成属性值的平滑过渡，timing-function表示通过什么方法进行平滑过渡。

例如：(背景色在2s内由红色平滑过渡到黑色)

div{
background-color:red;
transition: background-color 2s linear;
}
div:hover{
background-color:black;
}

使用transition可以同时指定多个属性值，例如：

div{
transition: background-color 1s linear, color 1s linear;
}

2. animation

与transition功能相同，都是通过改变元素的属性值来实现动画效果的。区别在于：使用transition只能通过指定属性的开始值与结束值。而animation则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

用法：

@keyframes 关键帧集合名 {创建关键帧的代码}

例如：

@key-frames test-color{
%0{ background-color:red; }
%50{ background-color:blue; }
%100{ background-color:red; }
}

div:hover{
animation-name:test-color;
animation-duration:5s;
animation-timing-function: linear;
animation-iteration-count: 1;/* 用来指定动画的播放次数，也可以通过对该属性指定infinite属性让动画不停的循环播放。 */
}

3. 实现动画的方法

也就是animation-timing-function属性可以指定的值

- linear：在动画开始时到结束时以同样的速度进行改变

- ease-in：动画开始时速度很慢，然后速度按曲线值进行加快

- ease-out：动画开始时速度很块，然后速度按曲线值进行放慢

- ease：动画开始时速度很慢，然后速度按曲线值进行加快，然后放慢

- ease-in-out：动画开始时速度很慢，然后速度按曲线值进行加快，然后放慢