Share your repls and programming experiences

← Back to all posts
🚦 Cool Traffic Lights Animation
RolandJLevy (1083)

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

Links 🔗

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.

Comments
hotnewtop
7ih (34)

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

RolandJLevy (1083)

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

DynamicSquid (4924)

You are really good at CSS!!

RolandJLevy (1083)

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

DynamicSquid (4924)

@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!

RolandJLevy (1083)

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