css3-动画(animation)
Posted asasas
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3-动画(animation)相关的知识,希望对你有一定的参考价值。
具有以下属性
1;animation-name自定义动画名称
2:animation-duration动画指定需要多岁秒或者毫秒完成,默认值是0;
3:animation-timing-function 动画的时间曲线 linear 匀速 ease先慢后快 结束前变慢
4:animation-delay:动画在启动前的延迟间隔 默认0
5:animation-direction 是否轮流反向播放动画
6:animation-iteration-count动画的播放次数 默认1
7:animation-Play-state动画是否正在运行或已暂停 paused暂停动画 running正在运行的动画默认
实例:本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.2 s; animation-duration: 5 s; animation-play-state: paused; animation-iteration-count: 3 ; /*以上可以简写成:*/ animation: moves 5 s linear 0.2 s 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 */ } } |
以上是关于css3-动画(animation)的主要内容,如果未能解决你的问题,请参考以下文章