无需JavaScript：首个CSS动画完成后，第二动画启动时设display:block可行吗？

当然可以做到！不过要注意一个关键点：display属性本身是不可被CSS动画过渡的，所以我们需要换个思路，用opacity和visibility来模拟元素的显示/隐藏，同时配合动画的时序控制来实现你要的效果。

核心思路 #

• 初始状态下把目标元素设置为opacity: 0、visibility: hidden（替代display: none，这样元素仍占据空间但不可见；如果需要完全不占位，可以结合position: absolute或height: 0+overflow: hidden）
• 第一个动画完成后，通过animation-delay让第二个动画在第一个动画结束后启动
• 在第二个动画的起始关键帧中，把元素切换为可见状态，同时执行后续动画

完整代码示例 #

HTML

<div class="first-box">第一个动画元素</div>
<div class="second-box">要显示的第二个元素</div>

CSS

/* 第一个动画元素样式 */
.first-box {
  width: 120px;
  height: 120px;
  background-color: #4285F4;
  animation: slideRight 2s forwards;
}

@keyframes slideRight {
  from { transform: translateX(0); }
  to { transform: translateX(300px); }
}

/* 第二个元素的初始状态与动画 */
.second-box {
  width: 120px;
  height: 120px;
  background-color: #EA4335;
  /* 初始隐藏，替代display:none */
  opacity: 0;
  visibility: hidden;
  /* 延迟动画启动，等待第一个2秒的动画结束 */
  animation: fadeInAndSlide 1.5s 2s forwards;
}

@keyframes fadeInAndSlide {
  /* 动画启动瞬间切换为可见状态 */
  0% {
    opacity: 0;
    visibility: hidden;
  }
  1% {
    opacity: 1;
    visibility: visible;
  }
  /* 后续执行你需要的动画效果 */
  100% {
    transform: translateY(150px);
  }
}

关键细节解释 #

• 用opacity: 0 + visibility: hidden替代display: none：既实现了元素不可见、不响应交互的效果，又支持CSS动画过渡，这是核心的替代方案。
• animation-delay: 2s：精准对齐第一个动画的时长，让第二个动画刚好在第一个动画结束后启动。
• 第二个动画的0%到1%关键帧：快速完成可见状态的切换，模拟“动画开始时立即显示元素”的效果，之后再执行你需要的动画动作。
• forwards关键字：让动画结束后保持最后一帧的状态，避免元素回到初始隐藏状态。

如果你的场景需要元素完全不占据空间（和display: none完全一致），可以在第二个元素的初始状态加上position: absolute，或者配合height: 0、overflow: hidden属性，再在动画关键帧中调整这些属性即可。

内容的提问来源于stack exchange，提问作者J. Doe