CSS中定义旋转动画需通过@keyframes关键帧规则和animation属性配合实现，首先在@keyframes中定义动画不同阶段的旋转状态，如从0%到100%设置transform: rotate(0deg)到transform: rotate(360deg)，形成完整旋转周期，随后通过animation属性应用动画，指定关键帧名称（如spin）、持续时间（如2s）、缓动函数（如linear）及循环次数（如infinite），简写形式可合并为animation: spin 2s linear infinite;，其中transform属性是旋转的核心，配合@keyframes的时序控制，即可实现元素的平滑旋转效果。
CSS旋转动画定义与应用：从基础到实践
在网页设计中，动画是提升用户体验、增强视觉吸引力的核心手段之一，旋转动画作为最基础且常用的动画效果，广泛应用于加载提示、交互反馈、装饰元素等场景，本文将详细介绍如何通过CSS定义旋转动画，从核心属性到实战应用,带你系统掌握这一技能。
什么是CSS旋转动画？
CSS旋转动画是指通过transform属性的rotate()函数，结合@keyframes规则，让元素围绕指定中心点进行角度变化的动态效果，与静态旋转不同，动画可以精确控制旋转的起始角度、结束角度、持续时间、缓动方式等,实现流畅且富有表现力的动态效果。
定义旋转动画的核心步骤
创建一个旋转动画需要两个核心部分：定义动画关键帧（@keyframes）和应用动画（animation属性）。
定义动画关键帧（@keyframes）
@keyframes用于指定动画在不同时间点的状态（即“关键帧”），通过设置from（或0%）和to（或100%）定义动画的起始和结束状态，也可以通过百分比（如25%, 50%）定义中间状态,实现更复杂的运动轨迹。
语法示例：
@keyframes rotateAnimation {
0% { /* 动画开始时的状态 */ }
50% { /* 动画中间状态（可选） */ }
100% { /* 动画结束时的状态 */ }
}
定义一个从0deg旋转到360deg的关键帧：
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
应用动画（animation属性）
animation是一个复合属性，用于将定义好的@keyframes应用到元素上，并精细控制动画的播放行为，它包含多个子属性,以下是常用子属性的说明：
| 子属性 | 作用 | 示例 |
|---|---|---|
animation-name |
指定绑定的@keyframes名称 |
animation-name: rotate; |
animation-duration |
动画持续时间（单位：s/ms） | animation-duration: 2s; |
animation-timing-function |
缓动函数（控制动画速度变化曲线） | animation-timing-function: linear; /* 或 ease, ease-in-out 等 */ |
animation-delay |
动画延迟开始时间（单位：s/ms） | animation-delay: 0.5s; |
animation-iteration-count |
动画播放次数（infinite为无限循环） |
animation-iteration-count: infinite; |
animation-direction |
动画播放方向（normal正向、reverse反向、alternate交替） |
animation-direction: alternate; |
animation-fill-mode |
动画结束后的状态（forwards保持最后一帧、backwards在延迟时保持第一帧、none默认） |
animation-fill-mode: forwards; |
animation-play-state |
动画播放状态（running播放、paused暂停） |
animation-play-state: paused; |
复合属性示例（简写形式，推荐使用）：
.element {
animation: rotate 2s linear infinite;
}
**提示：** 简写属性的顺序通常为：`[name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode]`，省略的属性会使用默认值。
旋转中心点（transform-origin）
默认情况下，元素围绕其中心点（50% 50%）旋转，通过transform-origin可以灵活调整旋转中心点,语法为：
transform-origin: x-axis y-axis;
x-axis和y-axis可以是：
- 关键词：
top、bottom、left、right、center（如top left）； - 百分比：相对于元素自身的尺寸（如
0% 0%表示左上角，100% 100%表示右下角）； - 像素值：具体偏移量（如
10px 20px）。
示例：让元素围绕左上角旋转
.element {
transform-origin: top left;
}
**应用场景：** 调整旋转中心点常用于创建如钟表指针（围绕中心轴旋转）、开门/关门效果（围绕边缘旋转）等特殊动画。
实战示例：从简单到进阶
示例1：无限旋转加载动画
标签： #旋转效果 #@keyframes #transform
