CSS动画实现让元素一直旋转

在CSS中，使用@keyframes动画和transform: rotate()属性来创建一个无限循环的旋转动画。以下是一个简单的示例，展示了如何使一个元素（比如一个div）无限地旋转：

@keyframes spin {  
  from {  
    transform: rotate(0deg);  
  }  
  to {  
    transform: rotate(360deg);  
  }  
}  
  
.spin-element {  
  animation: spin 2s linear infinite;  
  /* 其他样式，比如宽高、颜色等 */  
}

在这个示例中：

• @keyframes spin 定义了一个名为 spin 的关键帧动画。
• from { transform: rotate(0deg); } 设置了动画开始时的状态，即元素不旋转（0度）。
• to { transform: rotate(360deg); } 设置了动画结束时的状态，即元素旋转360度（也就是完成了一圈）。
• .spin-element { animation: spin 2s linear infinite; } 将上述定义的动画应用到一个具有 .spin-element 类的元素上。2s 是动画的持续时间，linear 是动画的速度曲线（匀速），infinite 表示动画将无限次地重复。

现在，只需将 .spin-element 类添加到任何HTML元素上，该元素就会开始无限旋转。例如：

<div class="spin-element">我是一个旋转的元素</div>

转换曲线
linear(匀速)
ease(慢快慢)
ease-in(慢快)
ease-out(快慢)
ease-in-out(慢快慢)比ease慢些

创建动画
@keyframes  动画名{
       from{}
         to{
      transform:translatex(1000px);
        }
}

animation:动画名  1s  1(次数)(infinite无穷)  alternate(原路返回) ;

animation:start 4s 1  forwards(停留在最后)

.box:hover{
        animation-play-state:paused;
}