通过CSS animation结合scale、rotate和opacity可实现复合动画，需定义@keyframes设置0%、50%、100%的变换状态，再将动画应用到元素并配置时长、缓动和循环次数，利用transform和opacity可提升性能，注意多个transform函数按从右到左执行顺序影响视觉效果。
要实现一个元素同时进行缩放、旋转和透明度变化的复杂动画，可以通过CSS的animation属性结合transform中的scale、rotate以及opacity来完成。关键在于定义一个包含多种变换的@keyframes动画帧序列。
定义关键帧动画（@keyframes）
在@keyframes中，可以设置多个阶段的样式变化，控制元素在整个动画过程中的行为：
@keyframes comboAnimation {
0% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
50% {
transform: scale(1.2) rotate(180deg);
opacity: 0.7;
}
100% {
transform: scale(1.5) rotate(360deg);
opacity: 0;
}
}
这个动画从正常大小、不旋转、完全不透明开始，中间放大并旋转半圈，最后放大更多、转满一圈并完全消失。
应用动画到元素
将定义好的动画绑定到具体元素，并设置持续时间、缓动函数和播放次数：
立即学习“前端免费学习笔记（深入）”；
.animated-element {
width: 100px;
height: 100px;
background-color: #3498db;
animation: comboAnimation 3s ease-in-out infinite;
}
参数说明：
- comboAnimation：动画名称，需与@keyframes一致
- 3s：动画总时长为3秒
- ease-in-out：先慢后快再慢，使动画更自然
- infinite：无限循环播放
优化动画性能与视觉效果
使用transform和opacity触发的是GPU加速，性能更好。建议避免使用会触发重排的属性如left、top等。
如果希望动画启动有延迟，可添加：
animation-delay: 0.5s;
若只希望播放两次后停止：
animation-iteration-count: 2;
基本上就这些。通过组合scale()、rotate()和opacity，配合关键帧控制节奏，就能创建出流畅且富有表现力的复合动画效果。不复杂但容易忽略的是transform多个函数的书写顺序——它们按从右到左执行，因此scale(1.2) rotate(180deg)和rotate(180deg) scale(1.2)在某些情况下视觉略有差异，需注意测试。
