CSS动画中rotate必须写为transform: rotate()，因rotate非独立属性；需合并其他transform值，启用硬件加速防卡顿，hover旋转需用animation-play-state控制，IE兼容应改用transition。
animation 里 rotate 要写成 transform: rotate()，不能只写 rotate()
直接在 @keyframes 里写 rotate(360deg) 是无效的，CSS 动画属性必须作用于具体可动画的 CSS 属性。旋转是 transform 的子操作，所以得写完整声明。
- ✅ 正确：
@keyframes spin { to { transform: rotate(360deg); } } - ❌ 错误：
@keyframes spin { to { rotate(360deg); } }（浏览器直接忽略） - ⚠️ 注意：
transform是复合属性，如果元素已有transform: scale(1.2)，再动画 rotate 会覆盖它——得合并写成transform: scale(1.2) rotate(360deg)
导航栏图标旋转卡顿？检查是否触发了 layout 或 paint
单纯加 animation: spin 2s linear infinite 可能导致低帧率，尤其在旧版 Safari 或低端安卓机上。根本原因是 rotate() 默认作用于整个渲染层，若父容器有 overflow: hidden 或图标本身带阴影/边框，浏览器可能被迫频繁重绘。
- 强制开启硬件加速：给图标加
transform: translateZ(0)或will-change: transform - 避免同时动画多个属性：别在同一个
animation里混用rotate和opacity，除非真需要；opacity 单独动画更稳 - 图标尽量用
或background-image，别用含文字或复杂渐变的 PNG——后者缩放+旋转易糊且耗 GPU
hover 触发旋转但松开后不停？用 animation-play-state 控制
很多导航图标想“鼠标悬停才转”，结果一 hover 就无限转，移开也不停。这是因为 infinite 动画一旦开始就不会自动暂停，得手动干预。
- 基础写法：
.nav-icon { animation: spin 1.5s linear infinite paused; }+.nav-icon:hover { animation-play-state: running; } - ⚠️ 坑：如果用了
animation-fill-mode: forwards，hover 结束后图标会卡在最后一帧（比如转到 360deg 后位置不变），这时应去掉forwards，或改用animation-fill-mode: backwards - 想加点交互感？可以加
animation-direction: alternate让它正反来回转，比单向更柔和
IE 不支持 animation？别硬扛，用 transform + transition 模拟
IE10+ 支持 transform 和 transition，但不支持 @keyframes。如果项目还得兼容 IE，就别写 animation，改用状态切换 + 过渡。
- 示例：
.nav-icon { transform: rotate(0deg); transition: transform 0.6s ease-in-out; }+.nav-icon.active { transform: rotate(360deg); } - JavaScript 控制：点击时给图标加
active类，转完用transitionend事件移除——这样既兼容又可控 - 注意：IE 对
transform-origin解析较死板，设中心点优先用transform-origin: center，别写50% 50%（IE9-10 有时失效）
实际用起来，最常被漏掉的是 transform 的叠加规则和 animation-play-state 的配合时机。特别是当图标嵌在 flex 容器里又带 margin 时，rotate 会连带影响布局流——这时候就得套一层 隔离 transform 作用域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
