animation 必须配合 @keyframes 名称才生效，如 animation: slideIn 1s；仅写时长无效；需确保名称完全一致，且使用可动画属性（如 transform、opacity），并用 animation-fill-mode: forwards 保持结束状态。
animation 属性怎么写才生效
直接写 animation: 2s ease-in-out 是无效的——animation 必须配合 @keyframes 名称才能触发。它本身不定义动作，只调度动画行为。
常见错误是漏掉关键帧名称，或名称拼写不一致（大小写、空格、下划线都敏感）：
-
animation: slideIn 1s;要求存在@keyframes slideIn { ... } - 若定义的是
@keyframes slide_in，但调用写成animation: slideIn，动画完全不会执行 - 不写时长（
animation-duration）或名称，浏览器会忽略整个声明
@keyframes 里能用哪些 CSS 属性做动画
不是所有 CSS 属性都支持平滑过渡。只有「可动画化属性」（animatable properties）才能在 @keyframes 中产生中间帧效果。
常用且安全的包括：opacity、transform（translate、scale、rotate）、background-color、width/height（需有明确初始/结束值）。
立即学习“前端免费学习笔记（深入）”；
注意这些容易踩坑的点：
-
display: none → block无法动画——display不可动画，改用opacity+visibility组合 -
margin/padding虽可动画，但可能引发重排（layout thrashing），优先用transform: translate()替代位移 -
height: auto无法动画——必须指定具体数值（如height: 0→height: 100px）
如何控制动画只播一次、不循环也不反转
默认情况下 animation-iteration-count 是 1，但很多人误以为它会自动「停在最后一帧」——其实默认行为是回到初始状态（除非显式设置 animation-fill-mode）。
要让元素停在动画结束时的样子，必须加：
animation-fill-mode: forwards;
完整写法示例（淡入 + 向右平移，播一次，停在终点）：
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.element {
animation: fadeInRight 0.4s ease-out 0.1s 1 forwards;
}
其中 0.1s 是 animation-delay，1 是次数，forwards 表示保持 to 状态。
动画卡顿或闪一下再开始？检查这三点
视觉上“闪一下”或“掉帧”，通常不是代码逻辑错，而是渲染层没对齐：
- 避免对
top/left动画——它们触发布局计算；统一用transform: translate()，走 GPU 合成 - 确保父容器没设
overflow: hidden且子元素动画超出时被意外裁剪（尤其用scale或大位移时） - 如果动画在页面加载后立刻触发，但 DOM 还没就绪，建议加
animation-delay: 0.01s或用 JS 在DOMContentLoaded后加 class 触发
最简可控触发方式仍是：初始无动画样式，用 class 切换激活 animation，避免样式竞争和首帧异常。
