CSS(Cascading Style Sheets)样式更改——过渡、动画

div 
{ 
transition: width 1s; 
-moz-transition: width 1s;  /* Firefox 4 */ 
-webkit-transition: width 1s;  /* Safari 和 Chrome */ 
-o-transition: width 1s;  /* Opera */ 
} 
transition-property:应用过渡的Css属性的名称 比如宽度width 
transition-duration:过渡效果花费的时间   比如1s 
transition-timing-function:渡效果的时间曲线 如下所示： 
linear 匀速 
ease 先慢后快 
ease-in 慢速开始 
ease-out 慢速结束 
ease-in-out 慢速开始和结束 
cubic-bezier(n,n,n,n) 在cubic-bezie 函数中定义自己的值，可能的值是0至1之间的数值 
transition-delay:过渡效果何时开始 如1s 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

@keyframes my 
{ 
from {background: red;} 
to {background: yellow;} 
} 
 
@-moz-keyframes my /* Firefox */ 
{ 
from {background: red;} 
to {background: yellow;} 
} 
 
@-webkit-keyframes my /* Safari 和 Chrome */ 
{ 
from {background: red;} 
to {background: yellow;} 
} 
 
@-o-keyframes my /* Opera */ 
{ 
from {background: red;} 
to {background: yellow;} 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

@keyframes my 
{ 
0%   {background: red;} 
25%  {background: yellow;} 
50%  {background: blue;} 
100% {background: green;} 
} 
 
@-moz-keyframes my /* Firefox */ 
{ 
0%   {background: red;} 
25%  {background: yellow;} 
50%  {background: blue;} 
100% {background: green;} 
} 
 
@-webkit-keyframes my /* Safari 和 Chrome */ 
{ 
0%   {background: red;} 
25%  {background: yellow;} 
50%  {background: blue;} 
100% {background: green;} 
} 
 
@-o-keyframes my /* Opera */ 
{ 
0%   {background: red;} 
25%  {background: yellow;} 
50%  {background: blue;} 
100% {background: green;} 
} 
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.

div 
{ 
animation-name: my; 
animation-duration: 5s; 
animation-timing-function: linear; 
animation-delay: 2s; 
animation-iteration-count: infinite; 
animation-direction: alternate; 
animation-play-state: running; 
/* Firefox: */ 
-moz-animation-name: my; 
-moz-animation-duration: 5s; 
-moz-animation-timing-function: linear; 
-moz-animation-delay: 2s; 
-moz-animation-iteration-count: infinite; 
-moz-animation-direction: alternate; 
-moz-animation-play-state: running; 
/* Safari 和 Chrome: */ 
-webkit-animation-name: my; 
-webkit-animation-duration: 5s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-delay: 2s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
-webkit-animation-play-state: running; 
/* Opera: */ 
-o-animation-name: my; 
-o-animation-duration: 5s; 
-o-animation-timing-function: linear; 
-o-animation-delay: 2s; 
-o-animation-iteration-count: infinite; 
-o-animation-direction: alternate; 
-o-animation-play-state: running; 
} 
 
animation-name                   选择器的 keyframes 的名称 
animation-duration               动画所花费的时间 
animation-timing-function        匀速播放动画 
animation-delay           动画过多久开始 
animation-iteration-count        播放动画次数 
animation-direction       是否在下一周期逆向地播放 normal 正常播放  alternate 轮流反向播放 
animation-play-state             暂停动画  paused 动画已暂停  running 动画正在播放 
animation-fill-mode 
none         不填充 
forwards     当动画完成后，保持最后一个属性值 
backwards     在animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值 
both        向前和向后填充模式都被应用。 
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.