HTML本身不支持动画，真正实现动画的是CSS的@keyframes和animation属性；@keyframes用于声明可复用的动画逻辑，animation属性将其应用到元素上，需注意命名规范、关键帧设置、属性可动画性及常见失效原因。
HTML 本身不做动画，真正实现动画的是 CSS 的 @keyframes 和 animation 属性；直接在 HTML 标签里写动画属性（比如 style="animation: ..."）可以跑，但不推荐——维护性差、无法复用、没法控制播放状态。
怎么用 @keyframes 定义一段可复用的动画
动画逻辑必须先声明，再应用。@keyframes 不是函数，不能传参，也不执行，只是“存档”一组状态。名字要合法（不能以数字开头、不能含空格或特殊符号）：
@keyframes slideIn {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
注意：from/to 可替换成 0%/100%，中间还能加 50% 等关键帧；所有关键帧里的属性必须能被浏览器动画化（比如 display、height（非 auto）可以，但 visibility、z-index 不行）。
怎么把动画加到元素上：用 animation 简写还是单个属性？
推荐初学时用单个属性写清楚，避免简写覆盖意外值（比如 animation: slideIn 1s 会把 animation-iteration-count 重置为 1，哪怕你之前设过 infinite）：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
animation-name: slideIn;—— 必填，对应@keyframes名字 -
animation-duration: 0.6s;—— 单位必须写（ms或s），0不行 -
animation-timing-function: ease-out;—— 默认ease，别盲目套linear，卡顿感明显 -
animation-fill-mode: forwards;—— 关键！否则动画播完立刻回退到初始状态 -
animation-play-state: paused;—— 需要 JS 控制暂停/播放时才设，否则别动它
为什么动画一闪而过、不动、或者根本没触发？
常见三类原因：
- 元素没有「尺寸」或「可见性」：比如
div里面只有文字但没设height，又对height做动画 → 不生效。改用transform或opacity更安全 -
animation-delay设太大，或animation-duration是0s/0ms→ 浏览器当无效值忽略整条声明 - CSS 优先级问题：比如用
!important覆盖了animation，或内联样式里漏写了单位（animation: slideIn 1;缺s）→ 浏览器静默失败，DevTools 的 Styles 面板里这条会带删除线
JS 控制动画时，animationstart 事件为什么监听不到？
因为动画可能在元素插入 DOM 前就已定义，或触发时机太早。稳妥做法是：
- 确保元素已挂载（比如用
requestAnimationFrame包一层） - 监听前先检查
getComputedStyle(el).animationName !== 'none' - 用
el.addEventListener('animationend', handler, { once: true });替代反复绑定
另外，animation 不适合做高频交互反馈（比如按钮 hover），优先用 transition；复杂交互动画建议用 GSAP 或 Framer Motion，原生 animation 没有时间轴控制、无法反向或动态调整进度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
