<div style=“height:60px;width:60px;border:1px solid grey”></div>

div{

      transform:rotate(60deg);

      transition:transform 1s cubic-bezier(.2,.93,.43,1);给trabnsform属性设置加过度，效果是1s钟转60°

}

 //或者

div{

      transform:translateX(50px);

      transition:transform 1s cubic-bezier(.2,.93,.43,1);给trabnsform属性设置加过度，效果是1秒钟平滑的右移50px

}

div{

      animation-name: mytest; /*执行动画的名字*/

      animation-duration: 1s; /**/

      animation-delay: 3s; /*页面加载完成后动画执行前的延迟时间*/

      animation-timing-function: linear; /*执行速率*/

      animation-iteration-count: 6; /*动画播放次数*/

      animation-direction: normal; /*是否轮流反复播放*/
 
}

div:hover{

      animation-play-state: paused;//鼠标hover时候暂停动画

}

@keyframes mytest{

            /* 动画初始位置 */

            0%{
               transform:rotate(0deg)
            }

         100%{
                 transform:rotate(60deg);
            }
        }