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)

      }

}

 

转载于:https://www.cnblogs.com/chenchenhao/p/9890014.html