CSS动画中@keyframes不支持单属性独立时长，所有属性共享同一动画周期；实现多属性不同速度需拆分为多个动画、分层DOM或合并transform配合贝塞尔曲线；transition天然支持per-property时长但依赖状态变化。
关键帧里不能直接写 transition-duration
CSS 动画中，@keyframes 规则本身不支持为单个属性指定独立的缓动时长（比如让 transform 用 0.3s、opacity 用 0.8s）。你写的每个关键帧只是“快照”，浏览器会自动在相邻关键帧之间对所有声明的属性做线性或按 animation-timing-function 插值——所有属性共享同一段动画周期。
想实现多属性不同速度，得拆成多个动画或用 transform 分层
真正可行的解法是把节奏不同的属性剥离开：
- 给元素本身加一个主
animation，只控制节奏统一的属性（如opacity） - 再用伪元素或子容器包裹另一个节奏不同的属性（如快速缩放 + 慢速位移），单独设
animation - 或者全用
transform合并：把位移、缩放、旋转写进同一个transform值里，靠贝塞尔曲线模拟“局部快慢”，但这需要反复调参，不可控
例如：让图标淡入（0.6s）同时内部圆点脉冲（0.2s 无限循环），就该让圆点作为子元素，自己声明 animation: pulse 0.2s infinite，父容器只负责 animation: fadeIn 0.6s。
animation-timing-function 对整个动画生效，不是单属性
animation-timing-function（如 cubic-bezier(0.1, 0.7, 0.2, 0.9)）作用于整个动画周期，影响所有在关键帧中变化的属性。它不能像 transition 那样写成 transition: opacity 0.6s, transform 0.2s 这种分属性声明。
立即学习“前端免费学习笔记（深入）”；
