css3动画

css3改变背景色和位置的动画时层上一定要加 position:relative 

 

css3 ie10以上支持 火狐支持 欧朋支持 苹果和谷歌支持但必须加-webkit-

@keyframes myfirst{

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

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

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

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

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

} 

@-webkit-keyframes myfirst{

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

 

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

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

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

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

} 

.dd{

width:200px;

height:200px;

background:red;

position:relative;

-webkit-animation:myfirst 2s linear 2s infinite 循环播放 alternate 逆向播放；

-webkit-animation-play-state:running/paused;// 这个必须单独写 指定动画是否正在运行或已暂停 

animation: myfirst 2s linear 2s infinite 循环播放 alternate 逆向播放；

animation-play-state:running/paused;//这个必须单独写 指定动画是否正在运行或已暂停 

}