css-animation

animation

对animation用的不多,那时主要还没有普及,对IE低版本还是要兼容的,所以一直给自己找借口,没有用。最近,在做项目中发现自己对这部分的掌握很差,所以是时候充充电了。

keyframes动画

keyframes主要是建立一系列自己的动画,原理就是将一套css样式逐渐变化成另一套样式,以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。

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

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}
/* Firefox */
@-moz-keyframes mymove {
from {top:0px;}
to {top:200px;}
}
/* Safari 和 Chrome */
@-webkit-keyframes mymove {
from {top:0px;}
to {top:200px;}
}
/* Opera */
@-o-keyframes mymove {
from {top:0px;}
to {top:200px;}
}
@keyframes mymove {
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
/* Firefox */
@-moz-keyframes mymove {
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
/* Safari 和 Chrome */
@-webkit-keyframes mymove {
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
/* Opera */
@-o-keyframes mymove {
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}

animation-name

指定你你需要的keyframes动画的名称

1
2
3
4
5
.test {
-webkit-animation-name: mymove;
-moz-animation-name: mymove;
animation-name: mymove;
}

animation-duration

规定完成动画需要花费的时间,以秒和毫秒为单位,默认值为0.

1
2
3
4
5
6
7
8
9
.test {
-webkit-animation-name: mymove;
-moz-animation-name: mymove;
animation-name: mymove;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
animation-duration: 2s;
}

animation-timing-function

animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。

ease:缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔。
linear:线性效果,等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。
ease-in:渐显效果,等同于cubic-bezier(0.42,0,1.0,1.0)函数。
ease-out:渐隐效果,等同于cubic-bezier(0,0,0.58,1.0)函数。
ease-in-out:渐显渐隐效果,等同于cubic-bezier(0.42,0,0.58,1.0)函数。
step-start:马上转跳到动画结束状态。
step-end:保持动画开始状态,直到动画执行时间结束,马上转跳到动画结束状态。
steps([, [ start | end ] ]?):第一个参数number为指定的间隔数,即把动画分为n步阶段性展示,第二个参数默认为end,设置最后一步的状态,start为结束时的状态,end为开始时的状态,若设置与animation-fill-mode的效果冲突,而以animation-fill-mode的设置为动画结束的状态。
cubic-bezier(number, number, number, number):特殊的立方贝塞尔曲线效果。

animation-delay

animation-delay 属性定义动画何时开始。

animation-delay 值以秒或毫秒计。

提示:允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。

animation-iteration-count

animation-iteration-count 属性定义动画的播放次数。

animation-iteration-count: n|infinite;

animation-direction

animation-direction 属性定义是否应该轮流反向播放动画。

如果 animation-direction 值是 “alternate”,则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。

注释:如果把动画设置为只播放一次,则该属性没有效果。

animation-direction: normal|alternate;

animation

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

animation-play-state

animation-play-state 属性规定动画正在运行还是暂停。

注释:您可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画。

animation-play-state: paused|running;

animation-fill-mode

animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。

注释:其属性值是由逗号分隔的一个或多个填充模式关键词。

animation-fill-mode : none | forwards | backwards | both;

以上就是animation的所有语法,但写出好的动画是需要很细腻的调试和不断的修改才能写出来的。