如何在CSS元素前一个变换结束后执行后续变换效果

你当前将scaleY()和translateY()写在同一条transform属性值中，CSS transition 会对整条transform属性做统一补间，两个变换会同步执行，无法自动按先后顺序触发。

方法1：纯CSS关键帧实现（无JS，最简单） #

用@keyframes拆分动画阶段，前半段只执行缩放，缩放完成后再启动位移动画，不需要额外写JS逻辑。

.trailingNote {
  position:absolute;
  bottom:0px;
  background:black;
  width:20px;
}
/* 把动画绑定到触发类，加类即启动 */
.trailingNote-moveUp{
  /* 总时长按需调整：示例为缩放5s + 位移3s，共8s */
  animation: scaleThenTranslate 8s linear forwards;
}

@keyframes scaleThenTranslate {
  /* 前5秒（动画进度0%~62.5%）：仅做Y轴缩放，位移保持0 */
  0% {
    transform: scaleY(1) translateY(0);
  }
  62.5% {
    transform: scaleY(10) translateY(0);
  }
  /* 后3秒（动画进度62.5%~100%）：缩放值固定为10，仅执行向上位移 */
  100% {
    transform: scaleY(10) translateY(-200px);
  }
}

• 时长比例可以根据需求自行调整：如果缩放5s、位移2s，总时长设为7s即可，缩放结束对应的关键帧百分比为 5/7 ≈ 71.4%，替换对应数值就行。
• forwards参数的作用是动画结束后保持最终状态，防止元素回到初始样式。

方法2：JS监听过渡结束（适合需要灵活交互的场景） #

把两个变换拆成独立的类，先触发缩放动画，等缩放的过渡执行完成后，再通过JS加类触发位移动画，时序控制更灵活。

.trailingNote {
  position:absolute;
  bottom:0px;
  background:black;
  width:20px;
  transition: transform 5s linear;
}
/* 第一阶段：仅缩放 */
.trailingNote-scale{
  transform: scaleY(10);
}
/* 第二阶段：保持缩放 + 向上位移 */
.trailingNote-moveUp{
  transform: scaleY(10) translateY(-200px);
}

配套JS逻辑：

const note = document.querySelector('.trailingNote')
// 触发第一阶段缩放动画
note.classList.add('trailingNote-scale')
// 监听过渡结束事件，触发第二阶段动画
note.addEventListener('transitionend', (e) => {
  if(e.propertyName === 'transform'){
    note.classList.add('trailingNote-moveUp')
  }
}, { once: true })

CSS目前不支持给同一条transform属性里的单个变换函数单独配置过渡参数，所有写在同一条transform里的变换函数都会被合并计算、同步执行，没法直接通过transition配置实现链式先后执行。

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