css动画animation 旋转动画

CSS动画中的旋转动画通常通过`@keyframes`规则来创建，它允许你定义一系列关键帧，描述元素从初始状态到最终状态的变化过程，包括旋转的角度。例如：

@keyframes rotate {
  0% { transform: rotate(0deg); } /* 初始位置，元素静止 */
  100% { transform: rotate(360deg); } /* 结束位置，元素完成一圈旋转 */
}

#myElement {
  animation: rotate 2s linear infinite; /* 动画名称、持续时间、速度曲线和是否无限循环 */
}

在这个例子中，`rotate`是一个自定义动画名称，`2s`表示动画播放2秒，`linear`指定动画的速度变化线性，即匀速进行。`infinite`意味着动画会无限次地循环。