如何使用纯CSS实现交通信号灯的颜色变化？

Question

我正在尝试在HTML和CSS中建立交通信号灯模型。我想知道是否有使用纯CSS而不使用javascript来进行浅色更改的方法。 我尝试使用动画，但无法获得想要的结果。我要每5秒变浅一次颜色。

这是我的html代码：

html,
body {
  border: 0;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

#container {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-end;
  align-items: center;
  width: 60%;
  height: 100%;
  background: pink;
  margin: 0;
  padding: 0;
}

#panel {
  display: flex;
  flex-direction: column;
  /*position: relative;*/
  justify-content: space-around;
  align-items: center;
  /*top: -70px;*/
  width: 30%;
  height: 60%;
  background: black;
  border-radius: 20px;
}

.light {
  width: 100px;
  height: 100px;
  background: lightgrey;
  border-radius: 100%;
  animation-name: colorChange;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

#red {
  animation-name: redColor;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#yellow {
  animation-name: yellowColor;
}

#green {
  animation-name: greenColor;
}

#bar {
  width: 10%;
  height: 30%;
  background: black;
}


/*@keyframes redColor{
    	from{background-color: red}
    	to{background-color: grey}
    }*/


/*@keyframes yellowColor{
    	from{background-color: yellow}
    	to{background-color: grey}
    }
    
    @keyframes greenColor{
    	from{background-color: green}
    	to{background-color: grey}
    }*/

<div id="container">
  <div id="panel">
    <div class="light" id="red"></div>
    <div class="light" id="yellow"></div>
    <div class="light" id="green"></div>
  </div>
  <div id="bar"></div>
</div>

Answer 1

您可以播放％的动画。因此，如果您希望橙色变短，则可以增加/减少百分比。 这不是响应速度最快的方法，但它至少回答了您的问题：P

html,
body {
  border: 0;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

#container {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-end;
  align-items: center;
  width: 60%;
  height: 100%;
  background: pink;
  margin: 0;
  padding: 0;
}

#panel {
  display: flex;
  flex-direction: column;
  /*position: relative;*/
  justify-content: space-around;
  align-items: center;
  /*top: -70px;*/
  width: 30%;
  height: 60%;
  background: black;
  border-radius: 20px;
}

.light {
  width: 100px;
  height: 100px;
  background: lightgrey;
  border-radius: 100%;
  animation-name: colorChange;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#red {
  animation-name: redColor;
}

#yellow {
  animation-name: yellowColor;
}

#green {
  animation-name: greenColor;
}

#bar {
  width: 10%;
  height: 30%;
  background: black;
}


@keyframes greenColor{
    	0%{background-color: green}
    	33%{background-color: green}
      34%{background-color: grey}
      100%{background-color: grey}
    }


@keyframes yellowColor{
      0%{background-color: grey}
    	33%{background-color: grey}
      34%{background-color: yellow}
      66%{background-color: yellow}
      67%{background-color: grey}
      100%{background-color: grey}
}
    
    @keyframes redColor{
      0%{background-color: grey}
      66%{background-color: grey}
      67%{background-color: red}
      100%{background-color: red}
    }

<div id="container">
  <div id="panel">
    <div class="light" id="red"></div>
    <div class="light" id="yellow"></div>
    <div class="light" id="green"></div>
  </div>
  <div id="bar"></div>
</div>