关键帧内并列声明多个可动画属性是标准做法，浏览器自动插值；需确保属性属W3C可动画列表，性能敏感时优先用transform+opacity，并注意Safari对filter等属性的兼容性问题。
关键帧里写多个属性是标准做法，不是“方法”而是必须
CSS 动画的关键帧（@keyframes）本就支持在同一个百分比节点里声明任意多个样式属性。浏览器会自动对所有可动画属性做插值计算，不需要额外“开启”或“启用”多属性变化——只要它们属于可动画属性列表（比如 transform、opacity、color、background-color 等），就能同时生效。
常见错误是只写一个属性，误以为其他要另起一段；或者把多个属性拆到不同 from/to 块里，导致覆盖或遗漏。
- 每个
0%、50%、100%节点内，直接并列写你需要变更的所有属性 - 避免用
from和to混搭百分比写法，容易漏掉某段的属性声明 - 注意单位一致性：比如
width: 100px→width: 200px可以，但width: 100px→width: auto不可动画
哪些属性能同时动？看 W3C 可动画性定义
不是所有 CSS 属性都能参与过渡或动画。W3C 明确标注了每个属性的「animatable」状态。例如：
-
transform、opacity、color、background-color、font-size是可动画的 -
display、height（当值为auto时）、position（值为static或relative等本身不触发布局重排的值时，仍可动画，但效果受限）不能直接插值 -
margin/padding数值类型可以动，但margin: auto不行
查证方式：打开 MDN 对应属性页（如 opacity），看 “Animatable” 是否为 “Yes”。别凭经验猜。
立即学习“前端免费学习笔记（深入）”；
性能敏感场景优先用 transform + opacity
同时改多个属性时，如果包含 left、top、width、height 这类触发布局（layout）或绘制（paint）的属性，动画会卡顿。浏览器无法将其提升到合成层。
- 把位移、缩放、旋转统一用
transform: translateX(100px) scale(1.2) rotate(10deg)表达 - 透明度变化统一走
opacity，别用rgba(0,0,0,0.5)改 alpha（虽可动画，但不如opacity稳定） - 避免在关键帧中写
box-shadow复杂值或渐变色频繁变化，可能触发重绘
示例：
@keyframes slideIn {
0% {
transform: translateX(-100%) scale(0.8);
opacity: 0;
filter: blur(4px);
}
100% {
transform: translateX(0) scale(1);
opacity: 1;
filter: blur(0);
}
}
浏览器兼容性坑：filter、background-image 在 Safari 中表现不一
filter 和 background-image（尤其是 linear-gradient）虽然标称可动画，但在 Safari（特别是 iOS 15–16）中常出现跳变、不插值或完全不动的问题。
- 用
filter动画时，确保起止值结构一致（如都用blur(0px)→blur(8px)，别混用blur(0)和blur(8px)） - 渐变背景动画建议降级为
opacity切换两个元素，而非直接动画background-image - 测试必须真机跑，模拟器和桌面 Safari 表现常有偏差
复杂动画链路里，这些属性最容易成为“看起来写了却没动”的元凶。
