CSS3动画是什么？

 

    动画是使元素从一种样式逐渐变化为另一种样式的效果。

 

    您可以改变任意多的样式任意多的次数。

 

    请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。

 

    0%是动画的开始，100%是动画的完成。

 

    为了得到最佳的浏览器支持，您应该始终定义0%和100%选择器。

 

    实例

 

    当动画为25%及50%时改变背景色，然后当动画100%完成时再次改变：

 

@keyframes myfirst

 

{

 

    0%   {background: red;}

 

    25%  {background: yellow;}

 

    50%  {background: blue;}

 

    100% {background: green;}

 

}

 

 

 

@-webkit-keyframes myfirst /* Safari 与 Chrome */

 

{

 

    0%   {background: red;}

 

    25%  {background: yellow;}

 

    50%  {background: blue;}

 

    100% {background: green;}

 

}

 

    实例

 

    改变背景色和位置：

 

@keyframes myfirst

 

{

 

    0%   {background: red; left:0px; top:0px;}

 

    25%  {background: yellow; left:200px; top:0px;}

 

    50%  {background: blue; left:200px; top:200px;}

 

    75%  {background: green; left:0px; top:200px;}

 

    100% {background: red; left:0px; top:0px;}

 

}

 

 

 

@-webkit-keyframes myfirst /* Safari 与 Chrome */

 

{

 

    0%   {background: red; left:0px; top:0px;}

 

    25%  {background: yellow; left:200px; top:0px;}

 

    50%  {background: blue; left:200px; top:200px;}

 

    75%  {background: green; left:0px; top:200px;}

 

    100% {background: red; left:0px; top:0px;}

 

}