🚦 Cool Traffic Lights Animation - Replit

Skip to content

← Back to Community

🚦 Cool Traffic Lights Animation

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

Links 🔗

Traffic lights

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.

Voters

JacobMcPherson1

Comments

yeah, this is cool and all, but how are you so good at CSS?! :O

@hMarin haha, thanks! Lots of practice and lots of trial and error 😂

You are really good at CSS!!

@DynamicSquid thanks! It means a lot coming from you 😆

@RolandJLevy Oh thanks! But I'm not really a web dev guy, so it isn't hard to impress me :) But animations at this level using pure CSS is really next level!

@DynamicSquid thanks! the work I've seen you do has impressed me 😄