Skip to content
← Back to Community
đŸšĻ Cool Traffic Lights Animation
Profile icon
RolandJLevy

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

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
Profile icon
CyberRoman
Profile icon
ch1ck3n
Profile icon
DynamicSquid
Profile icon
JacobMcPherson1
Profile icon
RolandJLevy
Comments
hotnewtop
Profile icon
7ih

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

Profile icon
RolandJLevy

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

Profile icon
DynamicSquid

You are really good at CSS!!

Profile icon
RolandJLevy

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

Profile icon
DynamicSquid

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

Profile icon
RolandJLevy

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