css @keyframes动画

先放下我写的代码

.rex{
position: absolute;
top: 0px;left: 0px;width: 200px;height: 200px;
border-radius: 5px;border: 1px solid #ccc;
font-size: 125pt;text-align: center;line-height: 200px;background: #bbb;opacity: 0.5;
animation: rotate 8s infinite linear;
-webkit-animation: rotate 8s infinite linear;

                               -ms-animation:rotate 8s infinite linear;

}
@-webkit-keyframes rotate{
form{-webkit-transform: rotateY(0);-webkit-transition:right 3s linear,background-color 3s ease;}
to{-webkit-transform: rotateY(-350deg);}
}
@keyframes rotate{
form{-webkit-transform: rotateY(0);}
to{-webkit-transform: rotateY(-350deg);}
}
@-ms-keyframes rotate{
form{-webkit-transform: rotateY(0);}
to{-webkit-transform: rotateY(-350deg);}
}

<div class="rex">6</div>

上面的animation: rotate 8s infinite linear;rotate是动画名称 8s是执行一次动画的时间 infinite无限循环,动画循环次数    linear循环或者说是旋转速度

此外还可以设置动画开始前的延迟时间/动画是否轮流反响播放等

如：animation:name 8s linear 2s alternate alternate表示动画正向循环完成后再反向循环

实际上还可以设置stop属性

如“

anmiation-play-state属性，例如：

anmiation-play-state:paused;

-webkit-animation-play-state:paused;