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

Question

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 1

Use an animation:

#flashMe {
  height: 500px;
  width: 500px;
  background-color: black;
      
  animation: flash 3s forwards linear normal;
}

@keyframes flash {
  0% {
     background-color: black;
  }
  4% {
    background-color: green;
  }
  100% {
    background-color: red;
  }
}

<div id="flashMe"></div>