HTML怎么做动画效果_HTML CSS动画animation实现教程【入门】

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）：

立即学习“前端免费学习笔记（深入）”；

• 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 没有时间轴控制、无法反向或动态调整进度。