css动画实现需两步：先用@keyframes定义关键帧（名称必须准确），再用animation简写属性绑定到class上；缺名称、漏infinite、误用内联样式或触发重排均会导致失败。
用 @keyframes 定义动画，再用 animation 应用到元素上
核心是两步：先声明关键帧，再绑定到 HTML 元素。不写 @keyframes 名称或拼错，动画就完全不会触发——这是最常卡住的地方。
比如让一个按钮左右轻微晃动：
@keyframes wiggle {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
然后在按钮的 class 中引用：
.btn {
animation: wiggle 0.6s ease-in-out infinite;
}
-
infinite是实现「循环」的关键值，缺了它只播一次 - 时间单位必须带
s或ms，写成0.6不生效 - 不要在
@keyframes里写 vendor 前缀（如-webkit-transform），现代浏览器已原生支持
animation-iteration-count: infinite 能单独控制循环，但通常和 animation 简写一起用
单独写 animation-iteration-count: infinite 没问题，但容易漏掉其他必要属性（比如 animation-duration），导致动画不启动。推荐优先用简写 animation 一次性配齐。
- 简写顺序固定：
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state]; - 其中
[direction]可设为alternate让每次循环反向播放，避免生硬折返 - 如果只改循环次数，用独立属性更安全；但首次实现时，直接用简写更省心
HTML 中加 class 触发动画，别依赖 id 或内联 style
CSS 动画必须通过 class 或标签选择器生效，style="animation: ..." 写在 HTML 标签里会失效——因为内联样式无法调用 @keyframes 定义的动画名。
- 正确做法：
<button class="wiggle-btn">点我</button>，然后在 CSS 中写.wiggle-btn { animation: wiggle 0.6s infinite; } - 如果动画要条件触发（比如 hover 后开始），用
:hover伪类即可，无需 JS - 避免把
@keyframes放在<style></style>标签外（比如误写进），它必须在 CSS 作用域内
动画卡顿？检查是否触发了重排（reflow）
用 transform 和 opacity 做动画几乎不会卡，但改 width、height、top、left 就会强制浏览器反复计算布局，尤其在低端设备上明显掉帧。
- 能用
transform: translateX()就别用margin-left或left - 动画元素建议加
will-change: transform;（仅对复杂动画），但别滥用，可能引发内存占用升高 - 移动端测试时，打开 Chrome DevTools 的 Rendering 面板，勾选「Paint flashing」，看动画区域是否大面积闪烁——闪得越猛，重绘越重
@keyframes 名称一致、infinite 写对位置、且作用在 class 上，90% 的循环动画都能跑起来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
