css图标旋转动画怎么写_利用animation和transform rotate-css教程-PHP中文网

css图标旋转动画怎么写_利用animation和transform rotate

P粉602998670

发布： 2025-12-23 11:36:09

原创

286人浏览过

CSS图标旋转动画需定义@keyframes旋转帧并用animation应用，注意元素display兼容性、避免overflow裁剪，支持方向控制、cubic-bezier节奏调节及hover暂停，图标与文字应分层以确保仅图标旋转。

css图标旋转动画怎么写_利用animation和transform rotate

用 CSS 实现图标旋转动画，核心是结合 animation 和 transform: rotate()。关键在于定义一个旋转的动画帧（@keyframes），再将它应用到图标元素上，并设置持续时间、运动曲线和重复方式。

1. 基础旋转动画写法

最简实现如下：

CSS 部分：

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
<p>.icon-spin {
animation: spin 1s linear infinite;
}

登录后复制

说明：
– @keyframes spin 定义从 0° 转到 360° 的完整一圈；
– animation: spin 1s linear infinite 表示：使用 spin 动画，持续 1 秒，匀速播放，无限循环。

2. 图标需支持 transform（注意 display 和 transform 兼容性）

确保图标元素能正常触发 transform，常见情况：

办公小浣熊

办公小浣熊是基于商汤大语言模型的原生数据分析产品，

460

查看详情

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

如果是内联元素（如 <i></i>、<span></span>），建议加 display: inline-block 或 display: block，否则部分浏览器中 transform 可能不生效；
若图标来自字体（如 Font Awesome），直接加类即可；若为 SVG，可对 <svg></svg> 或内部 <g></g>/<path></path> 添加动画类；
避免父容器设置了 overflow: hidden 且尺寸过小，导致旋转时图标被裁剪。

3. 控制旋转方向、速度与暂停

更灵活的写法示例：

.icon-spin-clockwise {
  animation: spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
<p>.icon-spin-counterclockwise {
animation: spin-reverse 1.2s ease-in-out infinite;
}</p><p>@keyframes spin-reverse {
from { transform: rotate(0deg); }
to   { transform: rotate(-360deg); }
}</p><p>/<em> 鼠标悬停暂停 </em>/
.icon-spin:hover {
animation-play-state: paused;
}

登录后复制

说明：
– cubic-bezier() 可自定义加速/减速节奏；
– 用负角度（如 -360deg）实现逆时针旋转；
– animation-play-state: paused 支持交互式控制。