在CSS3动画中添加多个缓动效果可以通过以下几种方法实现：
多个动画属性结合不同缓动函数
可以对不同的动画属性分别设置不同的缓动效果，从而实现多个缓动效果的组合。例如，对于一个元素的移动和缩放动画，可以为移动属性设置一种缓动效果，为缩放属性设置另一种缓动效果。
@keyframes combinedAnimation {
0% {
transform: translateX(0) scale(0);
}
50% {
transform: translateX(50px) scale(1.2);
}
100% {
transform: translateX(100px) scale(1);
}
}
.combined {
animation: combinedAnimation 3s cubic-bezier(0.1, 0.1, 0.1, 1) both;
animation-delay: 1s;
animation-fill-mode: both;
}
在上述代码中，定义了一个名为 combinedAnimation 的动画，其中 transform 属性包含了 translateX 和 scale 两个动画效果。通过 cubic-bezier(0.1, 0.1, 0.1, 1) 为整个动画设置了一个自定义的缓动效果，但实际上 translateX 和 scale 在这个缓动曲线下的表现有所不同，从而产生了组合的缓动效果。元素在水平移动的同时进行缩放，并且移动和缩放的速度变化都遵循所设置的贝塞尔曲线，呈现出独特的动画效果。
使用多个 @keyframes 规则和动画
定义多个 @keyframes 规则，每个规则对应一个具有特定缓动效果的动画，然后将这些动画依次应用到元素上，实现多个缓动效果的叠加或顺序执行。
@keyframes moveAnimation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
@keyframes scaleAnimation {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.multiple-animations {
animation: moveAnimation 3s ease-in-out 0s both, scaleAnimation 3s cubic-bezier(0.5, 0.2, 0.3, 1) 0s both;
}
在这个例子中，分别定义了 moveAnimation 和 scaleAnimation 两个动画，它们各自具有不同的缓动效果，一个是 ease-in-out，另一个是通过 cubic-bezier(0.5, 0.2, 0.3, 1) 自定义的缓动效果。然后将这两个动画同时应用到类名为 multiple-animations 的元素上，元素会同时进行水平移动和缩放动画，且每个动画都按照各自的缓动效果进行，实现了多个缓动效果的组合。
利用 animation-delay 和 animation-fill-mode 控制缓动顺序和状态
通过设置 animation-delay 可以控制多个动画的执行顺序，使它们在不同的时间开始，从而产生更复杂的缓动效果组合。同时，使用 animation-fill-mode 可以指定动画在执行前后如何应用样式，进一步调整缓动效果的表现。
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes moveUpAnimation {
0% {
transform: translateY(50px);
}
100% {
transform: translateY(0);
}
}
.sequential-animations {
animation: fadeInAnimation 2s ease-in 0s both, moveUpAnimation 2s ease-out 2s both;
}
在上述代码中，定义了 fadeInAnimation 和 moveUpAnimation 两个动画，分别用于实现元素的淡入和向上移动效果。通过设置 animation-delay，使淡入动画立即开始，而向上移动动画在淡入动画完成2秒后开始，从而实现了先淡入后向上移动的顺序效果。并且两个动画都使用了 both 的 animation-fill-mode，确保动画在开始前应用初始关键帧样式，结束后保持最终关键帧样式，使整个动画过程更加自然流畅，实现了多个缓动效果的有序组合。
结合JavaScript动态切换缓动效果
使用JavaScript可以根据用户的交互或特定的条件动态地切换元素的CSS类或修改动画的属性，从而实现不同缓动效果的切换和组合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
margin-bottom: 20px;
transition: transform 1s;
}
.ease {
transition-timing-function: ease;
}
.linear {
transition-timing-function: linear;
}
.ease-in {
transition-timing-function: ease-in;
}
.ease-out {
transition-timing-function: ease-out;
}
.ease-in-out {
transition-timing-function: ease-in-out;
}
</style>
</head>
<body>
<button onclick="changeEasing('ease')">Ease</button>
<button onclick="changeEasing('linear')">Linear</button>
<button onclick="changeEasing('ease-in')">Ease In</button>
<button onclick="changeEasing('ease-out')">Ease Out</button>
<button onclick="changeEasing('ease-in-out')">Ease In Out</button>
<div id="myBox" class="box"></div>
<script>
function changeEasing(easingValue) {
var box = document.getElementById('myBox');
box.className = 'box ' + easingValue;
box.style.transform = 'translateX(100px)';
setTimeout(() => {
box.style.transform = 'translateX(0)';
}, 1000);
}
</script>
</body>
</html>
在这个示例中，页面中有一个蓝色的方块元素和几个按钮，点击不同的按钮可以为方块的移动动画动态地切换不同的缓动效果。通过JavaScript获取方块元素，根据用户点击按钮传递的缓动函数值，修改方块的类名，从而切换不同的缓动效果类，实现了根据用户交互动态组合缓动效果的功能。每次点击按钮后，方块会向右移动100px，并在1秒后回到初始位置，以便用户观察不同缓动效果下的动画表现。这种方式可以根据具体的业务逻辑和用户行为，灵活地实现多种缓动效果的组合和切换。
