动画不跑90%因未绑定@keyframes到真实元素或绑定有误；需含from/to、合法命名、用transform/opacity、配animation属性（如animation: fadeslide 0.4s ease-in）、设fill-mode为forwards防回退，并检查元素是否渲染及devtools动画面板。
动画不跑，90% 是因为只写了 @keyframes 却没绑定到真实元素上，或者绑定方式有坑。
怎么写合法的 @keyframes 规则
关键帧必须包含至少两个状态：起始（0% 或 from）和结束（100% 或 to），否则浏览器直接忽略整个规则。
-
@keyframes名称不能含空格、特殊符号（如my-animation合法，my animation非法） - 只写
50%没配0%和100%？动画不会启动 - 避免在关键帧里改
display、height（非过渡友好属性），优先用transform和opacity - 示例（合法且常用）：
@keyframes fadeSlide { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
为什么加了 @keyframes 动画还是不动
定义只是“写剧本”，不等于“开拍”。必须通过 animation-name 显式绑定，且目标元素得是真实渲染的节点。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
display: none或visibility: hidden的元素不会触发动画 - 用 JS 动态加 class 时，如果同步执行（比如
el.classList.add('animate')紧接着就渲染），浏览器可能跳过第一帧——加个setTimeout(() => ..., 0)强制分帧 - 伪元素（
::before/::after）或空<div></div>若无宽高，transform可能不可见 - 确保 CSS 选择器确实命中了目标元素（检查 DevTools 的 Styles 面板里有没有生效的
animation属性）
animation 属性怎么配才生效
单独写 animation-name 不够，至少还要指定时长；推荐用简写，避免漏掉隐式默认值。
- 最简可用组合：
animation: fadeSlide 0.4s ease-in;（名称、时长、缓动） - 常见漏项：
animation-iteration-count默认是1，想循环得显式写infinite -
animation-fill-mode很关键：不设forwards，动画播完就回退到初始样式 - 性能提示：加
will-change: transform;或确保父容器有transform: translateZ(0);可触发硬件加速
旋转/3D 动画容易卡住的点
旋转类动画对 transform-origin 和 perspective 敏感，错一个就看不出效果。
-
rotate(360deg)默认绕中心点转，要绕左上角就加transform-origin: top left; - 用
rotateX/rotateY必须配perspective，且得加在父容器上，不是动画元素本身 - 示例：
.container { perspective: 800px; } .box { animation: spinY 2s infinite; } @keyframes spinY { to { transform: rotateY(360deg); } } - 别在关键帧里混用
rotate()和rotateZ()，语义重复还可能触发重排
真正卡住的地方往往不是语法写错，而是元素没渲染、class 没生效、或动画播完立刻回退。打开 DevTools 的 Animations 面板，一眼就能看出动画是否被识别、是否在运行、是否被中断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
