css3一直旋转 暂停后还保持角度

要使CSS3动画一直旋转，并在暂停时保持最后的角度，您可以使用animation-play-state: paused;属性来暂停动画，并使用animation-fill-mode: forwards;来保留最后的状态。

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.rotating-element {
  animation: rotate 2s linear infinite;
  animation-play-state: running; /* 默认运行动画 */
  animation-fill-mode: forwards; /* 在动画结束时保留最后的状态 */
}
 
.rotating-element.paused {
  animation-play-state: paused; /* 添加一个类来暂停动画 */
}

 

2、transtion: all 1s ease;
        1、ease：（逐渐变慢）
        2、linear：（匀速）
        3、ease-in：(加速)
        4、ease-out：（减速）
        5、ease-in-out：（加速然后减速）

 

/* 菜单旋转样式 */
    .snowy-doublerow-layout-menu li .anticon {
        -webkit-transition: -webkit-transform 0.6s ease-in;
    }

    .snowy-doublerow-layout-menu li:hover .anticon {
        /* -webkit-transform: rotate(720deg); */
        animation: rotate 0.3s ease-in;
        animation-play-state: running; /* 默认运行动画 */
        animation-fill-mode: forwards; /* 在动画结束时保留最后的状态 */
    }