CSS3新特性详解(四)：CSS3过度transition和动画animation @keyframes规则详解

  继上篇“CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解 ”后，本文继续CSS3剩余部分：CSS3的过渡transition和动画animation属性。曾几何时我们要在页面上实现动画只能：

• 做个flash动画或gif图片；
• js动画，比如要实现元素水平位移动画，可以搞个定时器，元素的left从 -1000px 开始每隔 200ms 增加 100px。

  现如今，我们只要使用CSS3的transition、animation属性及@keyframes定义，就可以轻松实现元素的动画效果。下面让我们一起看下transition、animation属性的使用详解。

一、transition 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。语法定义上transition有两种实现方式：

• 使用transition简写属性
• 使用transition-property、transition-duration、transition-timing-function和transition-delay组合属性。

1、transition简写属性

语法： transition: property duration timing-function delay;
参数说明：

• property：none|all|css属性，如height，width等；
• duration：过渡时长，可以是秒或毫秒，1s表示1秒，500ms表示500毫秒；
• timing-function：时间曲线函数，如：linear，ease，ease-in等；
• delay：延迟时间，1s表示1秒后进行过渡动画。

案例：

transition: margin-right 2s; /* 过渡效果作用在margin-right属性上，持续2秒 */
transition: margin-right 2s .5s;  /* 变换效果延迟0.5秒执行 */
transition: margin-right 2s ease-in-out; /* 变换效果时间曲线函数采用 ease-in-out */
transition: margin-right 2s ease-in-out .5s; /* 变换效果时长2秒，时间曲线函数ease-in-out，延迟0.5秒执行 */
transition: margin-right 2s, color 1s; /*多个属性变换效果用 逗号 分隔*/
transition: all 1s ease-out; /*所有属性都有变换效果，持续1秒*/

2、使用transition-property、transition-duration、transition-timing-function和transition-delay组合属性

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

变换效果在width属性上，效果时长1秒，时间曲线函数为linear，延迟2秒执行。

1）transition-property，应用过渡的 CSS 属性的名称

语法： transition-property: none|all| property; 默认值all

• none，没有属性会获得过渡效果；
• all，所有属性都将获得过渡效果；
• property，定义应用过渡效果的 CSS 属性名称，多个属性以逗号分隔。

2）transition-duration，完成过渡效果需要花费的时间

语法： transition-duration: time;
说明： 完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，表示没有动画效果。

3）transition-timing-function 过渡效果的时间曲线函数

语法： transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n); 默认值ease
各曲线函数说明：

• linear，匀速变换（等于 cubic-bezier(0,0,1,1)）。
• ease，慢–快--慢过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
• ease-in，以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
• ease-out 以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
• ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
• cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4）transition-delay 动画延迟，指定何时开始过渡效果

语法： transition-delay: time;
说明： transition-delay值以秒为单位（S）或毫秒（ms），默认值0，没有延迟。

3、transition 过渡动画生效的2个必要参数

• transition-property 不能是none，可以不设置（默认all）
• transition-duration 必须设置，因为其默认值是0

transition案例，请参考本文最后案例代码部分。

二、animation 动画

方便理解，先看个简单的案例：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
div:hover {animation: myfirst 2s}

div鼠标移上去会有背景色从红色渐变到黄色的动画过渡效果，持续2秒。我们可以看出，要实现animation 动画效果，需要2步：

• 定义@keyframes 规则
• 使用animation属性，animation可以采用简写方式，也可以采用animation-name、animation-duration等复合方式。

1、@keyframes 规则定义

@keyframes规则定义了动画是怎么动的，如上文的背景色变换，假设我们定义的是top属性变动则可以实现元素上下运动等。

语法：@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

一个案例：

@keyframes myfirst{
	0%   {background: red; left:0px; top:0px;}
	25%  {background: yellow; left:200px; top:0px;}
	50%  {background: blue; left:200px; top:200px;}
	75%  {background: green; left:0px; top:200px;}
	100% {background: red; left:0px; top:0px;}
}
div:hover{animation: myfirst 4s;}

案例说明，这个动画时长4s：

• 0% 动画开始，background: red; left:0px; top:0px;
• 25% 动画进行到4s*25% = 1s，background: yellow; left:200px; top:0px;
• 50% 动画进行到4s*50% = 2s，background: blue; left:200px; top:200px;
• 75% 动画进行到4s*75% = 3s，background: green; left:0px; top:200px;
• 100% 动画结束，background: red; left:0px; top:0px;

2、animation 属性详解

从语法定义上来说，实现animation动画，有2种方式：

• animation：简写方式，除了 animation-play-state 属性，其它属性都可以实现
• animation-name，animation-duration等组合方式

2.1 animation 简写方式

语法： animation: name duration timing-function delay iteration-count direction;

说明： 默认值为：none 0 ease 0 1 normal；

• name必须指定，否则没有动画效果；
• duration必须指定，其默认值是0；
• 简写方式不能设置animation-play-state属性。

一个案例：

animation:mymove 5s infinite; /* 动画无限播放 */
animation:mymove 5s 3; /* 动画播放3次 */
animation:mymove 5s 3 alternate; /* 1,3次正向播放；第2次反向播放 */

2.2 animation-* 复合方式

animation-name:mymove;
animation-duration:5s;

类似上述css，每项animation-*单独设置，我们称之为复合方式，常用的共有6个属性，具体如下：

1）animation-name， 需要绑定到选择器的 keyframe 名称

• 语法： animation-name: keyframename|none;
• 说明： keyframename @keyframes 名称，默认值“none”，参数必须指定，none表示无动画效果

2）animation-duration，动画时长

• 语法： animation-duration: time;
• 说明： 定义动画完成一个周期所需要的时间，以秒或毫秒计，默认值"0"，参数必须指定，0表示无动画效果

3）animation-timing-function，时间曲线（速度）函数

• 语法： animation-timing-function: value;
• 说明： 可选参数，默认值“ease”，其值可以是linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)，同transition-timing-function

4）animation-delay，动画开始前等待的时间

• 语法： animation-delay: time;
• 说明： 可选参数，定义动画开始前等待的时间，以秒或毫秒计。默认值是 0

5）animation-iteration-count，动画播放循环次数

• 语法： animation-iteration-count: n|infinite;
• 说明： n定义动画播放次数的数值，infinte表示无限次播放，默认值为1，只播放一次

6）animation-direction，动画是否应该轮流反向播放

• 语法： animation-direction: normal|alternate;
• 说明： normal默认值，正常播放；alternate表示动画应该轮流反向播放，会在奇数次数（1、3、5 等）正常播放，而在偶数次数（2、4、6 等）反向播放；需要注意的是animation-iteration-count为1，animation-direction无效

animation-name: myfirst;
animation-duration: 4s;
animation-iteration-count: 5;
animation-direction: alternate

动画@keyframs name为myfirst；完成一个周期所需时间为4妙；播放次数5次；第1,3,5次正向播放，第2,4次反向播放。

三、一个完整的DEMO

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS3-过渡和动画</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<style> 
.table {margin-top: 60px}
.transition_box .box{position: relative; width: 100px; height: 80px; background: #e4f0f5; text-align: center; line-height: 80px;}
.transition_box .box:hover {background: #909; color: #fff; width: 150px}

@keyframes myfirst{
	0%   {background: #e4f0f5; left:0px; top:0px;}
	25%  {background: yellow; left:200px; top:0px;}
	50%  {background: blue; left:200px; top:120px;}
	75%  {background: green; left:0px; top:120px;}
	100% {background: red; left:0px; top:0px;}
}
.animation_box .box{position: relative; width: 300px; height: 200px;}
.animation_box .rect{background: #e4f0f5; position: absolute; width: 100px; height: 80px; left: 0; top: 0; text-align: center; line-height: 80px;}
</style>
</head>

<body>
	<div class="container">
<table class='table table-bordered transition_box'>
	<tr>
		<td>
			<div class="box" style="transition:width 2s">Box1</div>
		</td>
		<td>
			<div class="box" style="transition:width 2s .5s">Box2</div>
		</td>
		<td>
			<div class="box" style="transition:width 2s ease-in-out">Box3</div>
		</td>
		<td>
			<div class="box" style="transition:all 2s ease-out">Box4</div>
		</td>
	</tr>
	<tr>
		<td>transition:width 2s</td>
		<td>transition:width 2s .5s</td>
		<td>width 2s ease-in-out</td>
		<td>transition:all 2s ease-out</td>
	</tr>
</table>
<table class='table table-bordered transition_box'>
	<tr>
		<td>
			<div class="box" style="transition-property:width; transition-duration:2s">Box1</div>
		</td>
		<td>
			<div class="box" style="transition-property:width; transition-duration:2s; transition-delay:0.5s">Box2</div>
		</td>		
		<td>
			<div class="box" style="transition-property:width; transition-duration:2s;transition-timing-function:ease-in-out">Box3</div>
		</td>
		<td>
			<div class="box" style="transition-duration:2s; transition-timing-function:ease-out">Box4</div>
		</td>
	</tr>
	<tr>
		<td>transition-property:width<br>transition-duration:2s</td>
		<td>transition-property:width<br>transition-duration:2s<br>transition-delay:0.5s</td>
		<td>transition-property:width; <br>transition-duration:2s<br>transition-timing-function:ease-in-out</td>
		<td>transition-duration:2s;<br>transition-timing-function:ease-out</td>
	</tr>
</table>
<table class='table table-bordered animation_box'>
	<tr>
		<td>
			<div class="box box1"><div class='rect' style="animation: myfirst 4s">Box1</div></div>
		</td>
		<td>
			<div class="box"><div class="rect" style="animation: myfirst 4s infinite">Box2</div></div>
		</td>		
		<td>
			<div class="box"><div class="rect" style="animation: myfirst 4s 5 alternate">Box2</div></div>
		</td>
	</tr>
	<tr>
		<td>animation: myfirst 4s</td>
		<td>animation: myfirst 4s infinte</td>
		<td>animation: myfirst 4s 5 alternate</td>
	</tr>
</table>

<table class='table table-bordered animation_box'>
	<tr>
		<td>
			<div class="box box1"><div class='rect' style="animation-name: myfirst;animation-duration:4s">Box1</div></div>
		</td>
		<td>
			<div class="box"><div class="rect" style="animation-name: myfirst;animation-duration:4s;animation-iteration-count:infinite">Box2</div></div>
		</td>		
		<td>
			<div class="box"><div class="rect" style="animation-name: myfirst;animation-duration:4s;animation-iteration-count:5;animation-direction:alternate">Box3</div></div>
		</td>
	</tr>
	<tr>
		<td>animation-name: myfirst;<br>animation-duration:4s</td>
		<td>animation-name: myfirst;<br>animation-duration:4s<br>animation-iteration-count:infinite</td>
		<td>animation-name: myfirst;<br>animation-duration:4s<br>animation-iteration-count:infinite<br>animation-direction:alternate</td>
	</tr>
</table>
</body>
</html>