CODEWITHSUNDEEP
css
AGamePlayer
AGamePlayer

Reputation: 7736

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

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

Upvotes: 0

Views: 76

Answers (1)

Turnip
Turnip

Reputation: 36682

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>

Upvotes: 5

Related Questions