How to use pure CSS to show an animation of one element's background and color property?

Tags: css

Problem :

I want to see whether it's possible to do this:


I hope the class .hint-auto-fade can be something like add a background of #ffe and color of #f00 to the .hello elements and fade away in 5 or 10 seconds. The elements then go back to its former background/color property (if has).


Solution :

Something like this should work:

.hello {
  color: blue;

.hint-auto-fade {
  animation: autoFade 5s linear;

@keyframes autoFade {
  from {
    background: #ffe;
    color: #f00;
<script src=""></script>

<div class="hello">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="hello">Phasellus consequat gravida arcu vulputate rutrum. Phasellus efficitur ante ac quam dapibus mollis.</span> Donec libero quam, sollicitudin in semper sed, interdum at nulla.

    CSS Howto..

    how to display an image on small screens and videos on large screen in html

    How to keep css elements from moving during transition

    Hide/Show Load function now working

    How to use the css height attribute for showing scroll bar in HTML table

    How do I make a paragraph of text display as a square/rectangle in CSS

    Ruby on rails dropdown