在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元素上，该元素就会开始无限旋转。例如：
转换曲线
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;
}