div{
width:200px;
margin:100px auto;
animation:rotate 3s linear infinite;
animation-duration:3s;动画完成一个周期所用的时间,以秒计算
animation-name:rotate;规定@keyframes动画的名称
animation-timing-function:ease-in-out(低速开始和结束);规定动画的速度曲线,linear-匀速,ease- 低速*快*慢
animation-delay:2s;动画开始前的延迟(可选);
animation-iteration-count:1;规定动画被播放的次数,默认1,infinite无限播放
animation-direction:normal;规定动画是否在下一周期逆向播放,normal正常播放,alternate轮流 反向播放
}
div img{
width:100%;
}
@keyframes rotate{
0%{
transform: rotateZ(0deg);
}
100%{
transform:rotateZ(360deg)
}
}
