html - CSS 动画序列

Question

我一直在编写一个非常简单的“红绿灯”程序，但遇到了一个问题，即在第一个 @keyframes 部分正确完成后它无法运行。根据我自己的在线研究，我猜测我需要一个转换(？)以便在第一个 @keyframes 完成时运行下一个。但是我对此缺乏经验，我不确定这里是否需要它。本质上是我遗漏了一个“触发器”，还是只是我遗漏了一些明显的东西？

请原谅粗糙的代码。它确实像我上面描述的那样工作

    body {
  background-color: #4d4d00
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#red {
  position: absolute;
  left: 50px;
  text-align: center;
  padding: 30px;
  background-color: #e60000;
  margin: 10px auto;
  width: 50px;
  height: 50px;
  border-radius: 200px;
  animation: red 4s 1s 3 linear;
}

#amber {
  position: absolute;
  left: 1px;
  text-align: center;
  padding: 30px;
  background-color: #ff3300;
  margin: 10px auto;
  width: 50px;
  height: 50px;
  border-radius: 200px;
  animation: amber 4s 1s 3 linear;
}

#green {
  position: absolute;
  left: 1px;
  text-align: center;
  padding: 30px;
  background-color: #009933;
  margin: 10px auto;
  width: 50px;
  height: 50px;
  border-radius: 200px;
  animation: green 4s 1s 3 linear;
}

@keyframes red {
  from {
    background-color: #e60000;
  }
  to {
    background-color: #000000;
  }
  @keyframes amber {
    from {
      background-color: #ff3300;
    }
    to {
      background-color: #000000;
    }
    @keyframes green {
      from {
        background-color: #009933;
      }
      to {
        background-color: #000000;
      }
    }

<div class="container">
  <div class="row">
    <div id="red">
      <br>
      <br>
      <div id="amber">
        <br>
        <br>
      </div>
    </div>
  </div>
</div>

Answer 1

你可以使用动画延迟。

这是一个简短/最小的代码示例。

.red {
  background: red;
}

.orange {
  background: orange
}

.green {
  background: lime;
}


/* layout */

div {
  display: flex;
  height: 150px;
  width: 50px;
  flex-direction: column;
  border-radius: 1em;
  background: #555;
  margin: 1em;
}

b {
  flex: 1;
  margin: 5px;
  border-radius: 50%;
  animation: fade 9s steps(2, end) infinite;
  box-shadow: 0 0 5px white
}

/* animation */
@keyframes fade {
  66%,
  100% {
    background: gray;
    box-shadow: 0 0
  }
}

.red {
  animation-delay: -12s
}

.orange {
  animation-delay: -6s;
}

<div class=trafficLights>
  <b class=red></b>
  <b class=orange></b>
  <b class=green></b>
</div>

这里有一个代码笔可以玩:https://codepen.io/gc-nomade/pen/YVWeQq