CSS3动画详解-优快云博客

二：动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

1、必要元素：

a、通过@keyframes指定动画序列；

b、通过百分比将动画序列分割成多个节点；

c、在各节点中分别定义各属性

d、通过animation将动画应用于相应元素；

2、关键属性

a、animation-name设置动画序列名称

b、animation-duration动画持续时间

c、animation-delay动画延时时间

.animation{

width: 30px;

height: 30px;

animation: change 5s infinite;

}

/*动画相比过渡可以控制更多细节，可以将一个动画拆成多个步骤*/

@keyframes change {

0% {

width: 30px;

height: 30px;

background-color: yellow;

}

25% {

width: 300px;

background-color: blue;

}

50% {

width: 30px;

height: 300px;

background-color: green;

}

100% {

width: 300px;

height: 300px;

background-color: pink;

}

<body>

<divclass="animation"></div>

</body>

d、animation-timing-function动画执行速度，linear、ease等

e、animation-play-state动画播放状态，running(默认)、paused(暂停)等

f、animation-direction动画逆播，alternate等

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

g、animation-fill-mode动画执行完毕后状态，forwards、backwards等

属性值	效果
none	默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具有forwards和backwards效果

h、animation-iteration-count动画执行次数，inifinate(无限次数)等，默认是1

参数值的顺序：

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

.animation {

width: 30px;

height: 30px;

background-color: blue;

/*动画名称*/

animation-name: change;

/*动画持续时间*/

animation-duration: 1s;

/*动画结束后的状态*/

animation-fill-mode: none;

/*无限次播放*/

animation-iteration-count: infinite;

/*动画延时*/

animation-delay: 1s;

/*动画暂停*/

animation-play-state: running;

/*动画反方向*/

animation-direction: alternate;

/*动画速度*/

animation-timing-function: linear;

}

@keyframes change {

0% {

width: 40px;

height: 40px;

}

100% {

width: 200px;

height: 200px;

}

<divclass="animation"></div>

***相关代码（1）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.div1{ width:200px; height:200px; animation:change 10s 1s  ease-in alternate forwards;}
@keyframes change{
	0%{ background:#F00;}
	20%{ width:400px; height:200px; background:url(2531170_03.gif);}
	50%{ height:300px; transform:rotate(60deg);}
	100%{ background:#FF3; transform:translate(500px,300px);}
	}
</style>
</head>

<body>
<div class="div1"></div>
</body>
</html>

***相关代码（二）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.div1{ width:200px; height:200px; animation:change 10s 1s ease-in infinite alternate;}
@keyframes change{
	from{ background:url(2531170_06.gif);}
	30%{ background:url(2531170_090531953000_2_08.gif); width:200px; transform:translateX(300px);}
	60%{ background:url(2531170_090531953000_2_08.gif); width:200px; transform:translateX(300px);}
	to{ background:url(2531170_10.gif); width:600px; height:200px; transform:translateX(500px);}
	}
	@keyframes change2{}
</style>
</head>

<body>
<div class="div1"></div>
</body>
</html>