CSS动画如何实现图标旋转效果_transform rotate @keyframes控制
使用CSS的@keyframes和transform: rotate()可实现图标旋转动画。1. 定义@keyframes spin从0deg到360deg；2. 通过animation属性应用动画，设置时长、速度曲线和循环次数；3. 可调整方向、角度、速度及悬停控制；4. 常用于加载图标、翻转箭头等交互场景，需确保元素为块级或内联块以生效。
想让图标旋转，用CSS的transform: rotate()配合@keyframes是最常见也最高效的方式。不需要JavaScript，纯CSS就能实现平滑、可控的旋转动画。
1. 使用 @keyframes 定义旋转动画
通过@keyframes可以定义动画关键帧，控制元素在不同时间点的状态。要实现360度旋转，可以从0度转到360度：
你也可以写成百分比形式，便于添加中间状态：
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }2. 将动画应用到图标上
定义好动画后，用animation属性把它绑定到图标元素，比如一个标签或：
说明：
- spin：对应前面定义的动画名称
- 2s：动画持续2秒
- linear：匀速转动，也可用 ease-in-out 等
- infinite：无限循环，如果只想转一次就去掉
3. 控制旋转行为的技巧
根据实际需求，你可以灵活调整动画效果：
- 改变速度：把
2s改成1s就是更快旋转 - 顺/逆时针：默认是顺时针。要逆时针，把
360deg改成-360deg - 只转半圈：
0% { rotate(0deg); } 100% { rotate(180deg); } - 暂停动画：给元素加
animation-play-state: paused;，鼠标悬停再播放
例如悬停时才旋转：
.icon { display: inline-block; animation: spin 2s linear infinite; animation-play-state: paused; } .icon:hover { animation-play-state: running; }4. 实际应用场景
这种旋转常用于：
- 加载中图标（loading spinner）
- 折叠箭头点击后翻转180度
- 按钮 hover 时轻微旋转增加交互感
如果是小幅度旋转（如箭头上下翻转），可以用：
@keyframes flip { 0%
{ transform: rotate(0deg); }
100% { transform: rotate(180deg); }
}
基本上就这些。掌握@keyframes和transform: rotate()组合，图标旋转轻松搞定，不复杂但容易忽略细节比如transform-origin或display类型。确保图标元素是块级或内联块，否则transform可能无效。
