通过@keyframes将transform、background-color等属性组合在同一动画中，浏览器会自动并行处理多个属性变化，实现流畅多属性动画。1. 定义包含translate、rotate、scale等变换及颜色变化的@keyframes规则；2. 应用animation属性到目标元素；3. 利用transform合并移动、旋转、缩放避免重排；4. 所有属性共享动画时长与缓动函数；5. 仅使用可动画属性如opacity、box-shadow等；6. 配合will-change提前优化性能。关键是在单个keyframes中同步定义多属性变化以提升渲染效率。
在CSS中实现多个属性同时动画，可以通过 animation 与 transform、opacity 等可动画属性结合使用来完成。关键在于将多个属性变化定义在同一个 @keyframes 规则中，浏览器会自动并行处理这些属性的过渡。
使用 @keyframes 定义多属性动画
在一个 @keyframes 动画中，可以同时修改多个CSS属性，它们会在动画过程中同步执行。
例如：让元素在移动位置的同时改变背景色和旋转角度：
@keyframes moveAndRotate {0% {
transform: translateX(0) rotate(0deg);
background-color: red;
}
100% {
transform: translateX(200px) rotate(180deg);
background-color: blue;
}
}
.animated-element {
animation: moveAndRotate 2s ease-in-out;
}
合理使用 transform 合并变换
transform 属性支持多个函数组合，是实现多变换动画的高效方式。
立即学习“前端免费学习笔记（深入）”；
- translate 移动位置
- rotate 旋转
- scale 缩放
- skew 倾斜
这些都可以写在同一 transform 中，避免触发重排，提升性能。
示例：
@keyframes complexTransform {to {
transform: translateX(100px) rotate(360deg) scale(1.5);
}
}
控制动画时间与缓动效果
所有属性共享相同的动画时长和 timing-function，除非使用 animation-timing-function 分开控制（不推荐）。更合理的做法是确保动画节奏协调。
若需不同属性有不同动画曲线，可考虑拆分为多个嵌套元素，各自独立动画。
注意可动画属性的限制
不是所有CSS属性都支持动画。常见可动画属性包括：
- 颜色类：color, background-color, border-color
- 尺寸类：width, height, padding, margin
- 变换类：transform
- 透明度：opacity
- 阴影：box-shadow, text-shadow
使用 will-change 可提前告知浏览器优化动画性能：
.animated-element {will-change: transform, background-color;
}
基本上就这些。只要把多个属性写进同一个 keyframes 中，浏览器就会自动并行处理，实现流畅的多属性动画效果。关键是选择合适的属性组合，避免频繁重排重绘，保证动画流畅。
