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:

$('.hello').addClass('hint-auto-fade');

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).

Thanks



Solution :

Something like this should work:

$('.hello').addClass('hint-auto-fade');
.hello {
  color: blue;
}

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

@keyframes autoFade {
  from {
    background: #ffe;
    color: #f00;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="hello">
  Hello
</div>

<hr>

<p>
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.
</p>


    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