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度：

你也可以写成百分比形式，便于添加中间状态：

2. 将动画应用到图标上

定义好动画后，用animation属性把它绑定到图标元素，比如一个<i>标签或<span>：

立即学习“前端免费学习笔记（深入）”；

说明：

Skybox AI

一键将涂鸦转为360°无缝环境贴图的AI神器

140

查看详情

• spin：对应前面定义的动画名称
• 2s：动画持续2秒
• linear：匀速转动，也可用 ease-in-out 等
• infinite：无限循环，如果只想转一次就去掉

3. 控制旋转行为的技巧

根据实际需求，你可以灵活调整动画效果：

• 改变速度：把2s改成1s就是更快旋转
• 顺/逆时针：默认是顺时针。要逆时针，把360deg改成-360deg
• 只转半圈：0% { rotate(0deg); } 100% { rotate(180deg); }
• 暂停动画：给元素加animation-play-state: paused;，鼠标悬停再播放

例如悬停时才旋转：

4. 实际应用场景

这种旋转常用于：

• 加载中图标（loading spinner）
• 折叠箭头点击后翻转180度
• 按钮 hover 时轻微旋转增加交互感

如果是小幅度旋转（如箭头上下翻转），可以用：

基本上就这些。掌握@keyframes和transform: rotate()组合，图标旋转轻松搞定，不复杂但容易忽略细节比如transform-origin或display类型。确保图标元素是块级或内联块，否则transform可能无效。

以上就是CSS动画如何实现图标旋转效果_transform rotate @keyframes控制的详细内容，更多请关注php中文网其它相关文章！