đĻ 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 đ
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.
DynamicSquid
You are really good at CSS!!
RolandJLevy
@DynamicSquid thanks! It means a lot coming from you đ
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!
RolandJLevy
@DynamicSquid thanks! the work I've seen you do has impressed me đ
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 đ