css动画必须作用在真实dom节点上才有效，如div、section等有明确尺寸的块级元素；html/body需设height:100vh等基础样式，内联元素须转为block或inline-block，选择器与id/class必须严格匹配，脚本需确保dom加载完成后再执行。
网页动画本身不依赖 HTML 文档结构的特殊标签，但所有动画的触发、绑定和控制都必须落在真实的 DOM 节点上——document、body、div、section 这些节点才是动画生效的“落点”。没选对节点，CSS 动画不会渲染，JavaScript 动画会找不到目标。
animation 作用在哪个 HTML 元素上才有效
CSS @keyframes 定义的是动画行为，真正让它动起来靠的是 animation 或 transition 属性，而这些属性只能加在**有样式的元素节点**上。常见误操作是直接写在 html 或 body 上却没设 height、overflow 等基础样式，导致子元素溢出、动画被裁剪或根本不可见。
-
html和body默认 height 不撑满视口，加height: 100vh才能确保后代动画区域稳定 -
div、section、article这类块级容器最常用，但必须有明确尺寸（哪怕min-height: 100px）或内容撑开，否则transform可能失效 -
span、em等内联元素默认不支持animation中的transform或width/height变化，得先加display: inline-block或block
document.querySelector() 找不到动画目标的典型原因
JS 动画常靠 document.querySelector() 拿节点，但页面还没加载完就执行，或者选择器写错层级，结果返回 null，后续 element.animate() 直接报错。
- 脚本放在
里且没加defer或DOMContentLoaded监听，DOM 根本没生成 - 用
#nav查找，但实际元素是<nav id="main-nav"></nav>，ID 值不匹配 - 用了
document.querySelectorAll('.card')却忘了循环遍历，直接对 NodeList 调用.animate()报错 - Shadow DOM 内部节点无法被外部
querySelector捕获，得用shadowRoot.querySelector()
body 作为动画容器时容易忽略的 CSS 继承问题
body 是绝大多数动画元素的父容器，但它自身默认没有 transform-style: preserve-3d、perspective 或 will-change，导致子元素的 3D 动画失真或性能掉帧。
- 要启用 3D 变换链，必须在
body或最近公共父节点上显式设置transform-style: preserve-3d -
perspective推荐设在body或包裹容器上，而不是每个动画元素单独设，否则深度感不一致 -
will-change: transform加在频繁动画的元素上即可，别盲目加到body—— 它会强制开启合成层，吃内存 -
overflow: hidden加在body上会裁掉position: fixed元素的动画位移（比如下拉菜单），需改用局部容器控制
真正卡住动画的，往往不是 keyframes 写得不够炫，而是节点选错了、样式漏了、脚本时机不对——DOM 结构看着简单，但每个节点的盒模型、层叠上下文、渲染上下文都得对得上，动画才会稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
