动画不播放主因是触发条件未满足，如@keyframes未定义、display:none阻断或选择器不匹配；卡顿源于layout/paint开销，应优先用transform/opacity；requestAnimationFrame需基于时间戳计算deltaTime；animationend仅在自然完成时触发。
动画不播放，但控制台没报错
这种情况多数不是代码语法错误，而是动画触发条件未满足。常见原因包括：animation-name 指向的 @keyframes 未定义或拼写不一致、元素初始状态被 display: none 或 visibility: hidden 阻断、CSS 选择器未正确匹配目标元素。
排查建议：
- 检查
@keyframes名称是否与animation-name完全一致（区分大小写） - 用浏览器开发者工具的「Styles」面板确认该元素实际计算出的
animation属性值（注意：若显示none，说明 CSS 规则未生效） - 临时添加
border: 1px solid red确认元素是否真实渲染且尺寸不为 0 - 避免在
display: none的父容器内启动动画——即使子元素设了display: block，动画也不会触发
动画卡顿或掉帧（FPS 明显低于 60）
HTML5 动画性能瓶颈通常来自强制同步布局（layout thrashing）或频繁重绘（paint）。transform 和 opacity 是仅触发合成（compositor）的属性，而 top、left、width、height、background-color 等会触发 layout 或 paint。
优化建议：
立即学习“前端免费学习笔记（深入）”；
- 优先使用
transform: translateX()替代left；用transform: scale()替代width/height - 对动画元素添加
will-change: transform（仅在必要时，避免滥用） - 避免在
@keyframes中写box-shadow或渐变背景的复杂变化，这类属性 paint 开销高 - 用 Chrome DevTools 的「Rendering」面板开启「FPS Meter」和「Paint Flashing」，直观识别重绘区域
JavaScript 控制的 requestAnimationFrame 动画失步
当用 requestAnimationFrame 手动驱动动画时，常见问题不是“不动”，而是时间漂移、跳帧或与 CSS 动画不同步。根本原因是未基于时间戳做增量计算，而是依赖帧数计数。
正确做法是记录上一帧时间戳，每次回调中计算 deltaTime：
let lastTime = 0;
function animate(currentTime) {
if (!lastTime) lastTime = currentTime;
const deltaTime = currentTime - lastTime;
// 例如：按 60fps 基准，每帧应走 16.67ms → 换算成进度百分比
const progress = (deltaTime / 16.67) * 0.01; // 归一化到 [0,1]
element.style.transform = `translateX(${position + progress * speed}px)`;
lastTime = currentTime;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);关键点：
- 永远用
currentTime参数（来自 RAF 回调），不要用Date.now()—— 后者不保证与屏幕刷新节奏对齐 - 避免在
animate内执行 DOM 查询（如getBoundingClientRect），这会强制同步 layout - 如果需暂停/恢复，用
cancelAnimationFrame+ 重新调用，而非布尔开关控制逻辑
animationend 事件不触发
这个事件只在 CSS 动画自然完成（非中断）时触发。常见失效场景：动画被新样式覆盖、animation-iteration-count 为 infinite、元素被移除 DOM、或使用了 animation-play-state: paused 后未恢复。
可靠监听方式：
- 确保监听的是目标元素，且事件名拼写正确：
element.addEventListener('animationend', handler)（注意无 on 前缀） - 检查 computed style 中
animation-name是否为none—— 若为none，animationend永远不会触发 - 对循环动画，改用
animationiteration；对可能被中断的场景，补充监听transitioncancel（如果混用 transition） - 注意浏览器兼容性：
animationend在 Safari 中曾需要webkitAnimationEnd前缀，现代版本已统一，但旧项目仍需检查
动画调试真正难的不是定位语法错误，而是识别「看起来正常却违背渲染管线规律」的行为——比如一个 opacity 动画在开发者工具里一切正常，但实际跑起来卡顿，往往是因为它被意外降级到了主线程 paint。
