动画卡顿因未及时提升渲染层，需用will-change: transform并确保动画类初始存在；SVG动画需设transform-box和避免SMIL；Safari中forwards失效需JS补终态；canvas叠加错乱需统一UI层叠上下文。
动画卡顿或首次加载不触发，检查 will-change 和渲染层提升时机
HTML5 页面中用 CSS 实现动画（比如 @keyframes + transform）时，浏览器未必自动为元素创建独立合成层。结果就是动画走主线程重排重绘，尤其在低端设备上明显卡顿。
常见错误是只加 transform: translateZ(0) 或 opacity: 0.99 强制硬件加速，但没考虑触发时机——比如动画类在 DOM 加载完才通过 JS 添加，而浏览器已错过层合成优化窗口。
- 优先用
will-change: transform（仅对即将动画的元素设置，避免滥用） - 确保动画类名在初始 HTML 中就存在，或至少在
DOMContentLoaded后立即添加，不要等window.onload - 避免对
top/left等触发布局的属性做动画；改用transform: translateY()或translateX() - 用 Chrome DevTools 的 “Layers” 面板验证是否真有独立合成层生成
SVG 内嵌动画与 CSS @keyframes 冲突导致样式丢失
在 index.html 直接写内联 SVG，并用 CSS 控制其子元素（如 <circle>）的动画时，容易出现 SVG 元素不响应 transform、opacity 等声明，或者动画中途跳变。
根本原因是 SVG 原生属性（如 cx, cy, r）和 CSS 属性作用域不同，且部分 SVG 元素默认不继承 transform，除非显式设 transform-box: fill-box 和 transform-origin。
立即学习“前端免费学习笔记（深入）”；
- 对 SVG 容器（
<svg>）设style="display: block"，避免行内元素基线对齐干扰位移 - 动画目标元素需加
transform-box: fill-box（尤其当使用transform-origin: center） - 避免混用 SMIL（如
<animate>）和 CSS 动画——现代浏览器已逐步弃用 SMIL，CSS 优先 - 测试时禁用 JS，确认纯 HTML+CSS 是否能跑通，排除脚本干扰
移动端 Safari 上 animation-fill-mode: forwards 失效
在 iOS Safari（尤其是 15.x 及更早版本）中，animation-fill-mode: forwards 对部分属性（如 opacity、transform）可能不保留最终状态，动画一结束就回退到初始值。
这不是 bug，而是 Safari 渲染引擎对复合属性（特别是带 transform 的）的优化策略：若检测到动画结束后无后续样式依赖，会主动丢弃中间层状态。
- 必须显式在动画结束后的元素上补一层 CSS 样式，例如：
.animated-element { opacity: 0; animation: fadeOut 0.3s forwards; } .animated-element.faded { opacity: 0 !important; } - 用 JS 在
animationend事件里添加终态 class，比纯 CSS 更可靠 - 避免在
@keyframes中混合使用transform和width/height—— Safari 对这类混合动画的forwards支持不稳定
HTML5 canvas 动画与 CSS 过渡叠加时 z-index 错乱
当 index.html 同时存在 <canvas>（用于粒子、路径等动态绘制）和 CSS 动画元素（如浮动按钮、提示框），常出现 canvas 内容“穿透”或遮盖关系异常，尤其在启用了 transform 的父容器中。
本质是 stacking context 分裂：CSS transform、opacity < 1、filter 等都会创建新层叠上下文，而 <canvas> 默认属于根 stacking context，一旦被包裹进带 transform 的 div，它的绘制层级就可能被重排。
- 给 canvas 容器加
z-index: 1不起作用？那就加position: relative显式触发层叠上下文 - 所有需要覆盖 canvas 的 UI 元素（如按钮、文字），统一放在一个独立
<div class="ui-overlay">中，并设position: absolute; top: 0; left: 0; z-index: 10 - 避免对 canvas 元素本身设置
transform或filter—— 这会让它的渲染管线绕过 GPU 优化路径
animation-duration 有用得多。 
