HTML5中CSS动画最简方案是用@keyframes定义+animation绑定，必设animation-duration；JS动画优选requestAnimationFrame，仅对transform/opacity动画并配will-change优化性能，上线前须验证兼容性与状态保持。
HTML5 页面里直接加 CSS 动画最省事
不用引入 JS 库，不改结构，纯 CSS 就能动起来。关键在 @keyframes 定义动作，再用 animation 绑定到元素上。
常见踩坑：动画没触发，大概率是忘了加 animation-duration（哪怕设成 0.1s），或者元素默认 display: none / opacity: 0 但没配对应的初始状态。
-
@keyframes名字不能带空格或特殊字符，比如slideIn可以，slide in不行 - 必须指定
animation-duration，否则动画时长为0s，等于没动 - 如果想首次加载就动，别用
:hover触发；直接写在元素的 class 里
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animated-element {
animation: fadeIn 0.4s ease-out forwards;
}用 requestAnimationFrame 写轻量 JS 动画更可控
CSS 动画适合简单入场/切换，复杂交互（比如拖拽中实时变形、滚动联动）得靠 JS。原生 requestAnimationFrame 比 setTimeout 更稳，浏览器会按帧率调度，不卡顿。
注意：别在动画函数里反复查 DOM 或改 class——先缓存 element.style，只写内联样式；大量元素动画要考虑性能，优先用 transform 和 opacity（触发合成层）。
立即学习“前端免费学习笔记（深入）”；
- 每次调用前检查是否已存在
rafId，避免重复启动 - 动画结束记得
cancelAnimationFrame(rafId)，防止内存泄漏 - 数值计算用小数而非字符串拼接，比如
element.style.transform = `translateX(${x}px)`
let rafId;
function animateX(element, targetX, currentX = 0) {
if (Math.abs(targetX - currentX) < 1) {
element.style.transform = `translateX(${targetX}px)`;
return;
}
const step = (targetX - currentX) * 0.1;
currentX += step;
element.style.transform = `translateX(${currentX}px)`;
rafId = requestAnimationFrame(() => animateX(element, targetX, currentX));
}
// 启动：animateX(document.getElementById('box'), 200);加动画后页面闪一下？检查 will-change 和重排重绘
动画一开，文字抖、滚动卡、首屏变慢——八成是触发了 Layout（重排）。比如动画里改了 width、height、top、left，浏览器就得重新计算所有元素位置。
解法很明确：只对 transform 和 opacity 做动画，并提前告诉浏览器“这个元素要动”，用 will-change: transform 提前创建合成层。
-
will-change别乱加，只加在真正要动的元素上，否则浪费内存 - 移动端慎用
will-change，部分安卓 WebView 有兼容问题 - 用 Chrome DevTools 的
Rendering面板勾选Paint flashing，看哪块在狂重绘
上线前必须验证的三件事
动画不是加完就完，尤其 HTML5 打包发布后，路径、加载时机、环境差异都会让动画失效。
- 确认 CSS 文件没被压缩工具删掉
@keyframes规则（某些旧版cssnano会误删） - JS 动画代码是否在 DOM 加载完才执行？用
DOMContentLoaded或把 script 放在</body>前 - 在目标设备（特别是 iOS Safari）真机测一次，
backface-visibility、perspective等属性行为可能和桌面不同
最常被忽略的是动画完成后的状态保持——forwards 关键字没加，动画一结束元素就弹回原始样式。这点在表单交互动画里特别容易翻车。
