animation简写会重置未显式声明的子属性为初始值；多动画需用逗号分隔且每组参数完整对应，否则解析失败或覆盖。
animation简写属性会覆盖哪些单独声明
用 animation 简写时，没显式写出的子属性会被重置为初始值，不是“保留原值”。比如只写 animation: slide 2s，那 animation-direction 就变成 normal（即使之前设过 alternate），animation-fill-mode 变成 none，animation-play-state 也回退到 running。
常见踩坑点：
- 漏写
animation-fill-mode: forwards→ 动画结束后元素立刻跳回起始状态 - 漏写
animation-iteration-count→ 默认只播 1 次，想无限循环得显式写infinite - 把
animation-delay和animation-duration顺序搞反 → 浏览器按固定顺序解析：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state
多个动画同时定义时，animation简写怎么写才不冲突
一个元素要跑两个动画（比如位移 + 旋转），不能靠多次写 animation 简写来叠加——后写的会完全覆盖前写的。必须把所有动画写进同一个 animation 声明里，用逗号分隔。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 每个动画的参数组必须完整对应，顺序一致。例如：
animation: move 1s ease, rotate 0.8s linear表示第一个动画用move关键帧、持续 1 秒、缓动；第二个用rotate关键帧、0.8 秒、线性 - 如果某个动画不需要某项参数（比如不希望旋转动画有延迟），也要留空或写默认值，否则错位会导致整组解析失败。例如：
animation: move 1s ease 0.2s, rotate 0.8s linear 0s - 注意浏览器对多动画的兼容性：IE10+ 支持，但旧版 Safari（ease 或
linear避坑
animation简写里 timing-function 写错会怎样
写错 animation-timing-function（比如拼成 ease-in-outt 或用了未定义的贝塞尔值）不会报错，但那一整个动画序列会退回到默认的 ease，而且不提示、不警告。
典型问题场景：
- 复制粘贴贝塞尔函数时多了一个空格：
cubic-bezier(0.25, 0.1, 0.25, 0.1 )→ 末尾空格导致整个值无效 - 混用关键字和函数：
animation: fade 1s ease, spin 0.5s cubic-bezier(0.42, 0, 0.58, 1) ease→ 第二个动画写了两个 timing-function，浏览器取第一个有效值，后面被忽略 - 在单个动画中漏掉 timing-function 位置：如
animation: pop 0.3s 0.1s→ 这里0.1s被当作animation-delay，timing-function 缺失，自动 fallback 到ease
用 animation 简写时，keyframes 名称大小写敏感吗
敏感。CSS 中 @keyframes 定义的名称和 animation-name（或简写里的第一项）必须**完全一致**，包括大小写、连字符、下划线。浏览器不会做任何 normalize。
容易被忽略的细节：
-
@keyframes SlideIn和animation: slidein 0.4s→ 不匹配，动画不触发 -
@keyframes fade-out和animation: fade_out 0.3s→ 连字符和下划线不同，也不匹配 - 自动生成的关键帧名（比如某些构建工具注入的）带哈希后缀，而手写简写里没同步更新 → 白屏级静默失败
调试时最直接的办法是打开 DevTools 的 Styles 面板，看对应元素的 animation-name 计算值是不是 none —— 是的话，八成是名称对不上。
