红绿灯🚦——CSS 动画

今天给大家分享一个很简单有趣的红绿灯演示动画,效果图如下:

乍一看你可能会觉得纯CSS动画可能做不到,实际上知道了原理还是比较简单的。

首先这里有3盏灯,我们为每一盏灯写了一个animation

<div class="traffic-light">
  <div class="light red"></div>
  <div class="light amber"></div>
  <div class="light green"></div>
</div>
.red {
  animation: red 10s linear infinite;
}
.amber {
  animation: amber 10s linear infinite;
}
.green {
  animation: green 10s linear infinite;
}

从上面样式里看出,每盏灯的 animation 持续时间都是10s,那动画不断循环播放的时候,它们之间就会一直保持同步的时间关系。

参照下面的图,从功能出发,很容易理解3盏灯的动画之间的逻辑关系(在这里逻辑关系就是指的它们之间的时间关系)

从图中看,一共分5个阶段或者说5个步骤,在每个阶段,不同的灯处于 on 或者 off 的状态。那么我们很明显就是将0% - 100%的时间跨度分成5份,每20%为一个状态,设置不同状态下的参数。

我们从红灯开始看。0%-20% 和 20%-40%,这两个阶段红灯一直亮的,其余的时间都是黑的。那我们可以这么设置:

@keyframes red {
  0% {
    background: black;
  }
  2%, 40% {
    background-color: red;
  }
  42%, 100% {
    background: black;
  }
}

这里有2%的间隙,是为了让灯看起来有点渐变的效果。可以按照20%``40%去写

同理,黄灯是20%-40%和80%-100%亮,其余时间不亮。这里也加了2%的间隙。

@keyframes amber {
  0%, 20% {
    background: black;
  }
  22%, 40% {
    background: #FF7E00;
  }
  42%, 80% {
    background: black;
  }
  82%, 100% {
    background: #FF7E00;
  }
}

绿灯也很简单,按照图上显示的,来设置它。

 @keyframes green {
  0%, 40% {
    background: black;
  }
  42%, 80% {
    background: green;
  }
  82%, 100% {
    background: black;
  }
}

最后就大功告成了!当然你可以在这里看到源码。

(完)

本文作者 Thinker

本文如有错误之处,请留言,我会及时更正

觉得对您有帮助的话就点个赞收藏吧!

欢迎转载或分享,转载时请注明出处

阅读原文