直接改transform无动画效果是因为未触发动画机制：CSS动画需显式声明animation或transition，仅写transform不会自动过渡；@keyframes仅为定义蓝图，必须通过animation属性挂载且参数正确（如duration>0、fill-mode设forwards等）；简单状态切换优先用transition，性能更好且支持反向；动画卡顿常因触发重排（如用left/top）、未启用硬件加速或混用布局属性所致。
为什么直接改 transform 但没动画效果？
常见误区是以为只要写了 @keyframes 就自动动起来，其实关键在触发：CSS 动画不会监听属性变化，必须显式声明 animation 或靠 transition 响应状态变更。比如只写 transform: translateX(100px) 而没配 transition，浏览器就直接跳到目标位置。
若想“平滑过渡”，优先考虑 transition；若需多阶段、循环、精确时序控制，才用 @keyframes + animation。
@keyframes 动画必须配合 animation 属性才生效
@keyframes 只是定义动作蓝图，不绑定到元素上等于没写。必须用 animation（或其子属性）挂载到目标选择器。
-
animation-name必须与@keyframes后的名称完全一致（区分大小写） -
animation-duration必须大于 0s，否则视为无效动画 - 默认
animation-fill-mode是none，动画结束后元素会“弹回”初始样式；需要保持终点状态得加forwards - 别漏写
animation-timing-function，否则默认是ease（不是线性），可能和预期不符
示例：
立即学习“前端免费学习笔记（深入）”；
@keyframes slideIn {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.box {
animation: slideIn 0.3s ease-out forwards;
}
用 transition 实现更轻量的平滑过渡
如果只是响应 hover、class 切换、JS 修改样式等简单状态变化，transition 比 @keyframes 更简洁、性能更好，且天然支持反向过渡。
- 只对可动画的属性起作用，如
transform、opacity、color；height、margin等会触发重排，慎用 - 推荐始终用
transform和opacity，它们走 GPU 合成层，不触发布局重算 - 多个属性过渡要写全，或用
all（但注意副作用，比如意外过渡了不该动的属性） - 过渡时间建议设为 0.2–0.4s，太短不明显，太长拖沓
示例：
立即学习“前端免费学习笔记（深入）”；
.btn {
opacity: 0.7;
transform: scale(1);
transition: opacity 0.25s, transform 0.25s;
}
.btn:hover {
opacity: 1;
transform: scale(1.05);
}
动画卡顿或闪烁的几个隐蔽原因
即使代码看起来没问题，也可能因底层渲染机制导致掉帧或闪屏，尤其在移动端。
- 用了
left/top等定位属性做动画 → 强制重排，改用transform: translate() - 动画元素没开启硬件加速 → 加
transform: translateZ(0)或will-change: transform（仅必要时加，别滥用） -
@keyframes中混用了布局触发属性（如width+transform）→ 浏览器无法优化，拆成独立动画层 - 动画频率过高（如
animation-iteration-count: infinite配超短duration）→ 视觉干扰大，也增加 CPU/GPU 负担
真正难调的往往不是怎么写，而是怎么让动画既顺又省资源——多数时候，少写几行 @keyframes 比堆参数更有效。
