erikvold erikvold - 5 months ago 19
CSS Question

Having a html element flash a background color and fade to another

I'm looking for a light weight solution to have an HTML element like a div or an li flash one background color, like solid green, then fade to another color over some time period like fading to white over 3 secs.

I don't want to include some massive library like jquery, and I only need this to work on Firefox, the most light weight the solution the better!

I know I could do this with javascript fairly easily, but it won't be very lightweight and I figure there must be some way to do this with CSS, that would be the ideal solution in my opinion.

Answer

Use an animation. Keep in mind you may need to prefix this to get it work on all target browsers.

HTML

<div id='flashMe'></div>

CSS

#flashMe {
  height:500px;
  width:500px;
  background:black;

  animation: flash 3s forwards linear normal;
}
@keyframes flash {
  0% {
    background:black;
  }
  4% {
    background:green;
  }
  100% {
    background:red;
  }
}
Comments