具有以下属性
１；ａｎｉｍａｔｉｏｎ－ｎａｍｅ自定义动画名称
２：ａｎｉｍａｔｉｏｎ－ｄｕｒａｔｉｏｎ动画指定需要多岁秒或者毫秒完成，默认值是０；
３：ａｎｉｍａｔｉｏｎ－ｔｉｍｉｎｇ－ｆｕｎｃｔｉｏｎ 动画的时间曲线 ｌｉｎｅａｒ 匀速 ｅａｓｅ先慢后快 结束前变慢
４：ａｎｉｍａｔｉｏｎ－ｄｅｌａｙ：动画在启动前的延迟间隔 默认０
５：ａｎｉｍａｔｉｏｎ－ｄｉｒｅｃｔｉｏｎ 是否轮流反向播放动画
６：ａｎｉｍａｔｉｏｎ－ｉｔｅｒａｔｉｏｎ－ｃｏｕｎｔ动画的播放次数 默认１
７：ａｎｉｍａｔｉｏｎ－Ｐｌａｙ－ｓｔａｔｅ动画是否正在运行或已暂停 ｐａｕｓｅｄ暂停动画 ｒｕｎｎｉｎｇ正在运行的动画默认
实例：本demo以平移（translate）为例说明动画的整个过程
html:
|
1
2
3
4
5
|
<body> <div class="warp"> </div></body> |
css:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.warp{ height: 100px; width: 100px; border: 1px solid #eee; animation-name:moves; animation-direction:alternate; animation-delay: 0.2s; animation-duration: 5s; animation-play-state: paused; animation-iteration-count: 3; /*以上可以简写成：*/ animation: moves 5s linear 0.2s 3;} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
@keyframes moves{ /*动画名称自定义*/ 10%{ /*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/ transform: translate(100px,0); -ms-transform:translate(100px,0); /*IE 9*/ -moz-transform:translate(100px,0); /* Firefox */ -webkit-transform:translate(100px,0); /* Safari 和 Chrome */ -o-transform:translate(100px,0); /* Opera */ } 30%{ /*时间点可以任意*/ transform: translate(100px,100px); -ms-transform:translate(100px,100px); /*IE 9*/ -moz-transform:translate(100px,100px); /* Firefox */ -webkit-transform:translate(100px,100px); /* Safari 和 Chrome */ -o-transform:translate(100px,100px); /* Opera */ } 60%{ /*时间点可以任意*/ transform: translate(0,100px); -ms-transform:translate(0,100px); /*IE 9*/ -moz-transform:translate(0,100px); /* Firefox */ -webkit-transform:translate(0,100px); /* Safari 和 Chrome */ -o-transform:translate(0,100px); /* Opera */ } 100%{ /*时间点可以任意*/ transform: translate(0,0); -ms-transform:translate(0,0); /*IE 9*/ -moz-transform:translate(0,0); /* Firefox */ -webkit-transform:translate(0,0); /* Safari 和 Chrome */ -o-transform:translate(0,0); /* Opera */ }} |