Sat, January 30, 2016 CSS - Yellow Fade Technique

I just wrote this little CSS snippet implementing Yello Fade Technique for a project that I have been working upon in which I had to highlight the newly added items to catch the attention of the user.

I could just as well write a little jquery animation snippet but couldn’t fathom writing Javascript for this simple CSS task. So the CSS snippet is given below:

@keyframes yellowfade { from { background : yellow ; } to { background : transparent ; } } .new-item { animation-name : yellowfade ; animation-duration : 1.5s ; }

Note For the sake of brevity I haven’t used any prefixes, but real world usage should use the vendor prefixes.

For just a vague idea of how I used it, check the demo at JSFiddle