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


Subscribe yourself

You can subscribe to my blog posts by providing your email below. Your email will be kept safe and there will be no spamming ..Promise!