JS & CSS Keyframe Fade-In Text Effect

A few simple code snippets to create a list that fades in, one item at a time, using Javascript, CSS and the @keyframes rule.

Click to Demo

What’s Going On Here?

A simple “for” loop in Javascript counts through each item in an ordered list, increases the delay be 2 seconds more than the previous one so they are subjected to the @keyframes rule one after the other. CSS controls the opacity, a few other effects and fade speed of 5 seconds.

Dabble with the timing and other attributes and see what you come up with!

You may also like...

Leave a Reply