CSS动画计时问题：实现div先下滑后放大的顺序动画

你的代码存在几个关键问题导致动画无法按预期执行：

• 属性拼写错误：transition-delay 应该是 animation-delay，这是控制动画延迟的正确属性
• transform属性冲突：两个动画都修改了transform，第二个grow动画执行时会直接覆盖slideDown的translateY状态，导致元素滑入后瞬间回到初始位置再放大
• 动画状态未衔接：第二个动画没有继承第一个动画的最终状态

方案一：合并为单个关键帧（最稳妥） #

将两个动画步骤合并到同一个@keyframes中，通过百分比精确控制顺序：

@keyframes slideDownThenGrow {
  0% {
    transform: translateY(-100%);
  }
  /* 前3秒完成滑入 */
  50% {
    transform: translateY(0);
  }
  /* 接下来3秒完成放大，基于滑入后的状态 */
  100% {
    transform: translateY(0) scale(1.1);
  }
}

#theDiv {
  animation-name: slideDownThenGrow;
  animation-duration: 6s; /* 总时长=滑入3s+放大3s */
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  
  padding: 50px;
  background-color: yellow;
}

<div id="theDiv">HELLO, WORLD!</div>

方案二：使用独立动画+animation-composition（现代浏览器支持） #

如果想保留两个独立的keyframes，可以利用animation-composition: add让第二个动画的transform叠加在第一个的基础上，同时设置正确的延迟：

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes grow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

#theDiv {
  animation-name: slideDown, grow;
  animation-duration: 3s, 3s;
  animation-delay: 0s, 3s; /* 放大动画延迟3秒，等滑入完成再执行 */
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  animation-composition: add, add; /* 让transform属性叠加，而非覆盖 */
  
  padding: 50px;
  background-color: yellow;
}

<div id="theDiv">HELLO, WORLD!</div>

关键说明 #

• 方案一兼容性最好，所有支持CSS动画的浏览器都能正常运行
• 方案二的animation-composition属性需要浏览器版本≥Chrome 112、Firefox 113，适合现代项目使用

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