#animated_div { width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1; -moz-animation:animated_div 5s 1; -webkit-animation:animated_div 5s 1; -o-animation:animated_div 5s 1; border-radius:5px; -webkit-border-radius:5px; } @keyframes animated_div { 0% {transform: rotate(0deg);left:0px;} 25% {transform: rotate(20deg);left:0px;} 50% {transform: rotate(0deg);left:500px;} 55% {transform: rotate(0deg);left:500px;} 70% {transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {transform: rotate(-360deg);left:0px;} } @-webkit-keyframes animated_div { 0% {-webkit-transform: rotate(0deg);left:0px;} 25% {-webkit-transform: rotate(20deg);left:0px;} 50% {-webkit-transform: rotate(0deg);left:500px;} 55% {-webkit-transform: rotate(0deg);left:500px;} 70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {-webkit-transform: rotate(-360deg);left:0px;} } @-moz-keyframes animated_div { 0% {-moz-transform: rotate(0deg);left:0px;} 25% {-moz-transform: rotate(20deg);left:0px;} 50% {-moz-transform: rotate(0deg);left:500px;} 55% {-moz-transform: rotate(0deg);left:500px;} 70% {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {-moz-transform: rotate(-360deg);left:0px;} } @-o-keyframes animated_div { 0% {transform: rotate(0deg);left:0px;} 25% {transform: rotate(20deg);left:0px;} 50% {transform: rotate(0deg);left:500px;} 55% {transform: rotate(0deg);left:500px;} 70% {transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {transform: rotate(-360deg);left:0px;} }

CSS3 动画

CSS3 动画

CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。

CSS3 @keyframes 规则

要创建CSS3动画，你将不得不了解@keyframes规则。

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

实例

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}