如何实现元素先缩放、在目标比例弹跳后恢复原缩放比例？

嘿，这个问题我熟！你想要的是先缩放到动态指定的比例，接着在这个缩放状态下做弹跳，最后回到原尺寸的连贯动画，对吧？原来分开操作的问题在于，弹跳动画是基于元素原始尺寸（scale(1)）的，当你先给元素设置scale(2)后，再应用弹跳的transform会直接覆盖之前的缩放，导致弹跳效果是相对于原始大小，而不是你缩放后的状态。

下面给你一个最优的实现方案，核心是用CSS变量+calc()函数来实现动态缩放因子的弹跳动画，整个过程是一个连贯的动作，完全支持动态传入缩放值：

完整代码实现 #

HTML 部分 #

<div id='test'></div>
<button class='butt' onclick='performScaleBounce(2)'>缩放2倍+弹跳</button>
<button class='butt' onclick='performScaleBounce(1.5)'>缩放1.5倍+弹跳</button>

CSS 部分 #

div#test {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  background-color: blue;
  margin: 50px auto;
  --target-scale: 1; /* 定义CSS变量存储动态缩放因子，默认1倍 */
}

/* 触发动画的类 */
.scale-bounce {
  animation: scale-then-bounce 1s linear forwards;
}

/* 整合缩放、弹跳、恢复的关键帧 */
@keyframes scale-then-bounce {
  /* 第一步：从原始尺寸缩放到目标比例 */
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(var(--target-scale));
  }
  /* 第二步：在目标缩放比例基础上执行弹跳 */
  40% {
    transform: scale(calc(var(--target-scale) * 1.15));
  }
  60% {
    transform: scale(calc(var(--target-scale) * 0.9));
  }
  80% {
    transform: scale(calc(var(--target-scale) * 1.1));
  }
  /* 第三步：从目标缩放比例恢复到原始尺寸 */
  100% {
    transform: scale(1);
  }
}

JavaScript 部分 #

function performScaleBounce(targetScale) {
  const element = document.getElementById('test');
  
  // 重置动画：先移除动画类，触发元素重绘后再添加类，避免动画不生效
  element.classList.remove('scale-bounce');
  void element.offsetWidth; // 强制触发重绘
  
  // 动态设置CSS变量的目标缩放值
  element.style.setProperty('--target-scale', targetScale);
  
  // 触发连贯动画
  element.classList.add('scale-bounce');
}

方案优势说明 #

• 动态适配缩放因子：通过CSS变量--target-scale，你可以传入任意数值作为缩放比例，弹跳动画会自动基于这个比例计算，完全满足你动态缩放的需求。
• 连贯的单动画过程：把缩放、弹跳、恢复三个步骤整合到一个关键帧动画里，避免了多个操作的时序问题，动画过程更流畅。
• 弹跳基于缩放后状态：用calc(var(--target-scale) * 弹跳比例)的方式，让弹跳的缩放是在目标缩放的基础上叠加，完美实现你想要的“在缩放比例下执行弹跳”的效果。

可自定义调整的点 #

• 如果你想调整各阶段的时间占比，比如让缩放更慢、弹跳时间更长，只需要修改关键帧的百分比即可（比如把缩放阶段改成0%-30%，弹跳阶段30%-90%）。
• 弹跳的幅度也可以通过修改关键帧里的1.15、0.9、1.1这些数值来调整，数值越大弹跳幅度越大。

内容的提问来源于stack exchange，提问作者Harper Creek