animation

2017-10-19

animation属性是如下几个简写属性构成:

animation-name动画名称,默认值:none

1
2
3
4
@keyframes donghuaname{
	from{}
	to{}
}

animation-duration一个动画周期时长,默认值:0s

animation-timing-function动画样式,默认值:ease

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

animation-delay动画延迟执行的时长,默认值:0s

animation-direction定义动画是否反向播放,默认值:normal

1
2
3
4
5
6
> 1.animation-direction: normal
> 2.animation-direction: reverse
> 3.animation-direction: alternate
> 4.animation-direction: alternate-reverse
> 5.animation-direction: normal, reverse
> 6.animation-direction: alternate, reverse, normal

animation-iteration-count定义动画结束前运行的次数,默认值:1

1
2
3
4
> 1.animation-iteration-count: infinite;
> 2.animation-iteration-count: 3;
> 3.animation-iteration-count: 2.3;
> 4.animation-iteration-count: 2, 0, infinite;

animation-fill-mode定义动画执行之前和执行之后如何给动画目标应用样式,默认值:none

1
2
3
4
5
6
7
8
> 1.animation-fill-mode: none
> 2.animation-fill-mode: forwards
> 3.animation-fill-mode: backwards
> 4.animation-fill-mode: both
> 5./* 可以应用多个参数，这个时候使用逗号隔开  */
> 6./* 各个参数应用于与次序相对应的动画名 */
> 7.animation-fill-mode: none, backwards
> 8.animation-fill-mode: both, forwards, none

animation-play-state定义动画是否运行或者暂停,默认值:running

1
2
3
4
5
6
7
8
9
10
11
> 1./* Single animation */
> 2.animation-play-state: running;
> 3.animation-play-state: paused;
> 4.
> 5./* Multiple animations */
> 6.animation-play-state: paused, running, running;
> 7.
> 8./* Global values */
> 9.animation-play-state: inherited;
> 10.animation-play-state: initial;
> 11.animation-play-state: unset;