Using the power of the CSS animation property to animate a set of traffic lights at night. Look, no JavaScript! 👀

Links 🔗

• Play live demo
• See source code
• Explore Github repo

How it works ⚙️

• Each light fades in and out using the CSS animation property
• The opacity of each light is controlled by the @keyframes rule
• The animation-delay property straggers the timing of the change
• The box-shadow property creates the glow effect for the lights
• The animation can be played / paused using the switch button
• Only CSS was used to create the animation and no JavaScript

About CSS animations ℹ️

A CSS animations let an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want.