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;//这个必须单独写 指定动画是否正在运行或已暂停

}