CSS3 ：animation 动画

CSS3动画分为二部份：

1、定义动画行为：

使用@keyframes定义动画行为，有两种方式：

方式一：仅定义动画起始样式，与动画结束样式

 1 @keyframes (动画行为名称)
 2 {
 3 from {background: red;}
 4 to {background: yellow;}
 5 }
 6 
 7 @-moz-keyframes (动画行为名称)
 8 {
 9 from {background: red;}
10 to {background: yellow;}
11 }
12 
13 @-webkit-keyframes (动画行为名称)
14 {
15 from {background: red;}
16 to {background: yellow;}
17 }
18 
19 @-o-keyframes (动画行为名称)
20 {
21 from {background: red;}
22 to {background: yellow;}
23 }

 

方式二：定义动画进展中的每步样式，百分比表示动画执行的进度百分值

 1 @keyframes (动画行为名称)
 2 {
 3 0%   {background: red;}
 4 25%  {background: yellow;}
 5 50%  {background: blue;}
 6 100% {background: green;}
 7 }
 8 
 9 @-moz-keyframes (动画行为名称)
10 {
11 0%   {background: red;}
12 25%  {background: yellow;}
13 50%  {background: blue;}
14 100% {background: green;}
15 }
16 
17 @-webkit-keyframes (动画行为名称)
18 {
19 0%   {background: red;}
20 25%  {background: yellow;}
21 50%  {background: blue;}
22 100% {background: green;}
23 }
24 
25 @-o-keyframes (动画行为名称)
26 {
27 0%   {background: red;}
28 25%  {background: yellow;}
29 50%  {background: blue;}
30 100% {background: green;}
31 }

2、定义动画执行方式。

将动画的行为附加到元素上，使其按照此规则执行动画效果，但我们还要给动画设定执行方式，比如什么动画让它多长时间完成，是否循环执行动画等。

动画执行方式语法：

1 animation: animation-name  animation-duration  animation-timing-function  animation-delay  animation-iteration-count  animation-direction  animation-play-state  animation-fill-mode

语法译文：