animation动画的使用
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) } }