CSS关键帧无限循环动画失效问题求助

你当前的问题是每个<h1>的动画仅执行一次，重复时会出现元素重叠或只循环单个元素的情况。核心原因是未将三个元素的动画整合为一个可循环的完整序列。以下是两种可行的解决方法：

方法一：统一父容器动画（推荐） #

将三个标题放入父容器，通过控制父容器的关键帧动画，按时序切换每个标题的显示状态，实现整体循环。

修改后的代码： #

<div class="title-container">
  <h1>Bark Side Down presents</h1>
  <h1>A cinematic CSS animation</h1>
  <h1>Using text-shadow</h1>
</div>

body {
  margin:0;
  font-family:lato,sans-serif;
  font-size:16px;
  display:flex;
  justify-content:center; 
  align-items:center;
  flex-wrap:wrap;
  height:100vh;
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/wyperfeld.jpg);
  background-size:cover;
  background-position:center top;
  color:white;
}

.title-container {
  position: relative;
  animation: cinematicSequence 17s ease-in-out infinite;
}

.title-container h1 {
  color:transparent;
  position: absolute;
  top: 0;
  left: 0;
  opacity:0;
  margin-top:-.5em;
  margin-left:-.5em;
}

@keyframes cinematicSequence {
  /* 初始阶段：所有标题隐藏 */
  0%, 11.8% {
    .title-container h1:nth-child(1) {
      text-shadow:0 0 1em white;
      opacity:0;
      margin-left:-.5em;
    }
  }
  /* 第一个标题淡入并保持显示 */
  11.8%, 19.1% {
    .title-container h1:nth-child(1) {
      text-shadow:0 0 0 white;
      opacity:1;
      margin-left:0;
    }
  }
  19.1%, 39.7% {
    .title-container h1:nth-child(1) {
      text-shadow:0 0 0 white;
      opacity:1;
      margin-left:0;
    }
  }
  /* 第一个标题淡出，第二个标题准备淡入 */
  39.7%, 41.2% {
    .title-container h1:nth-child(1) {
      text-shadow:0 0 1em white;
      opacity:0;
      margin-left:0;
    }
    .title-container h1:nth-child(2) {
      text-shadow:0 0 1em white;
      opacity:0;
      margin-left:-.5em;
    }
  }
  /* 第二个标题淡入并保持显示 */
  41.2%, 48.5% {
    .title-container h1:nth-child(2) {
      text-shadow:0 0 0 white;
      opacity:1;
      margin-left:0;
    }
  }
  48.5%, 69.1% {
    .title-container h1:nth-child(2) {
      text-shadow:0 0 0 white;
      opacity:1;
      margin-left:0;
    }
  }
  /* 第二个标题淡出，第三个标题准备淡入 */
  69.1%, 70.6% {
    .title-container h1:nth-child(2) {
      text-shadow:0 0 1em white;
      opacity:0;
      margin-left:0;
    }
    .title-container h1:nth-child(3) {
      text-shadow:0 0 1em white;
      opacity:0;
      margin-left:-.5em;
    }
  }
  /* 第三个标题淡入并保持显示 */
  70.6%, 77.9% {
    .title-container h1:nth-child(3) {
      text-shadow:0 0 0 white;
      opacity:1;
      margin-left:0;
    }
  }
  77.9%, 98.5% {
    .title-container h1:nth-child(3) {
      text-shadow:0 0 0 white;
      opacity:1;
      margin-left:0;
    }
  }
  /* 第三个标题淡出，回到初始状态 */
  98.5%, 100% {
    .title-container h1:nth-child(3) {
      text-shadow:0 0 1em white;
      opacity:0;
      margin-left:0;
    }
  }
}

方法二：独立设置每个标题的循环动画 #

为每个标题设置相同的总周期时长（17s，即初始延迟2s + 3个动画各5s），通过关键帧控制每个标题仅在对应时间段内执行动画，其余时间保持隐藏。

修改后的CSS： #

body {
  margin:0;
  font-family:lato,sans-serif;
  font-size:16px;
  display:flex;
  justify-content:center; 
  align-items:center;
  flex-wrap:wrap;
  height:100vh;
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/wyperfeld.jpg);
  background-size:cover;
  background-position:center top;
  color:white;
}

h1 {
  color:transparent;
  position:absolute;
  opacity:0;
  margin-top:-.5em;
  margin-left:-.5em;
}

h1:nth-child(1) {
  animation: firstTitle 17s ease-in-out infinite;
}

h1:nth-child(2) {
  animation: secondTitle 17s ease-in-out infinite;
}

h1:nth-child(3) {
  animation: thirdTitle 17s ease-in-out infinite;
}

@keyframes firstTitle {
  0%, 11.8% {
    text-shadow:0 0 1em white;
    opacity:0;
    margin-left:-.5em;
  }
  11.8%, 19.1% {
    text-shadow:0 0 0 white;
    opacity:1;
    margin-left:0;
  }
  19.1%, 39.7% {
    text-shadow:0 0 0 white;
    opacity:1;
    margin-left:0;
  }
  39.7%, 100% {
    text-shadow:0 0 1em white;
    opacity:0;
    margin-left:0;
  }
}

@keyframes secondTitle {
  0%, 41.2% {
    text-shadow:0 0 1em white;
    opacity:0;
    margin-left:-.5em;
  }
  41.2%, 48.5% {
    text-shadow:0 0 0 white;
    opacity:1;
    margin-left:0;
  }
  48.5%, 69.1% {
    text-shadow:0 0 0 white;
    opacity:1;
    margin-left:0;
  }
  69.1%, 100% {
    text-shadow:0 0 1em white;
    opacity:0;
    margin-left:0;
  }
}

@keyframes thirdTitle {
  0%, 70.6% {
    text-shadow:0 0 1em white;
    opacity:0;
    margin-left:-.5em;
  }
  70.6%, 77.9% {
    text-shadow:0 0 0 white;
    opacity:1;
    margin-left:0;
  }
  77.9%, 98.5% {
    text-shadow:0 0 0 white;
    opacity:1;
    margin-left:0;
  }
  98.5%, 100% {
    text-shadow:0 0 1em white;
    opacity:0;
    margin-left:0;
  }
}

关键说明 #

• 总周期时长计算：初始延迟2s + 3个动画各5s = 17s，确保循环时时序完全匹配。
• 方法一通过父容器统一控制，代码更易维护；方法二独立控制每个元素，灵活性更高。

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