使用CSS animation与transform: rotate()可实现高效旋转动画。1. 通过@keyframes定义从0deg到360deg的旋转关键帧，并绑定animation属性使元素持续旋转；2. 调整animation-duration控制速度，animation-direction设置正反或交替方向；3. 实际应用于加载动画时，结合border差异和圆形样式形成视觉指示；4. 优化方面应优先使用transform避免重排，添加will-change提升渲染性能，移动端慎用长时间动画以保流畅。合理配置能实现简洁生动的动效。
使用CSS animation 与 transform: rotate() 结合，可以轻松实现元素的旋转动画效果。这种方式无需JavaScript，性能良好，适用于图标、加载动画、按钮悬停等场景。
1. 基本语法结构
通过@keyframes定义动画关键帧，在其中使用rotate()控制元素的旋转角度，再将该动画绑定到目标元素上。
示例代码：
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-element {
animation: spin 2s linear infinite;
}
这段代码会让元素每2秒完成一次完整的360度旋转，并持续循环。
立即学习“前端免费学习笔记（深入）”；
2. 控制旋转速度与方向
通过调整animation-duration和animation-direction，可以控制动画快慢和方向。
-
快速旋转：设置
animation: spin 0.5s linear infinite;实现高速旋转 -
反向旋转：添加
animation-direction: reverse; -
来回摆动：使用
animation-direction: alternate;配合较小的角度范围
3. 实际应用示例：加载中动画
创建一个简单的圆形加载动画：
.loader {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
利用边框颜色差异，配合持续旋转，形成经典的加载指示器效果。
4. 注意事项与优化建议
为了提升动画流畅性并减少性能消耗，注意以下几点：
- 优先使用transform而非改变
left、top等触发重排的属性 - 可添加
will-change: transform;提示浏览器提前优化图层 - 在移动端考虑使用
requestAnimationFrame替代长时间运行的动画（如非必要） - 避免在低性能设备上同时运行过多旋转动画
基本上就这些。合理运用animation与rotate，能让你的页面动效既简洁又生动。不复杂但容易忽略细节。
