如何用CSS实现<p>标签延迟5s显示，带动画的<h1>加载完成后再展示p标签

实现方案 #

方案1：纯CSS实现（已知h1动画总时长的场景） #

如果你的h1动画总时长刚好为5秒，可以直接给p标签设置透明度+过渡动画实现延迟显示，代码示例如下：

/* 原有h1的动画定义，总时长设为5s */
h1 {
  animation: headingAnimate 5s ease forwards;
}
p {
  /* 初始状态设为透明不可见 */
  opacity: 0;
  /* 延迟时间和h1动画总时长保持一致，即可在h1动画结束后触发显示动画 */
  animation: fadeIn 0.3s ease 5s forwards;
}

/* 你自己的h1动画关键帧，这里是示例 */
@keyframes headingAnimate {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* p标签的显示动画 */
@keyframes fadeIn {
  to { opacity: 1; }
}

注意：如果你的h1动画总时长不是5秒，把p动画的延迟参数改成和h1动画总时长一致即可。

方案2：CSS+JS结合实现（更稳妥，避免时间差问题） #

如果h1动画时长不固定、或者后续可能调整h1动画时长，不想每次都同步修改p的延迟时间，可以用JS监听h1的animationend事件，触发p显示：

h1 {
  animation: headingAnimate 5s ease forwards;
}
p {
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* 显示状态类 */
p.show {
  opacity: 1;
}

const heading = document.querySelector('h1');
const paragraph = document.querySelector('p');

// 监听h1动画结束事件，动态触发p显示
heading.addEventListener('animationend', () => {
  paragraph.classList.add('show');
});

两种方案都可以满足需求：纯CSS方案实现简单不需要引入JS，CSS+JS方案维护性更高，不会因为h1动画时长调整出现显示时机错误的问题。

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