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.

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.

• javascript
• css
• firefox

2 Answers 2

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>

You could take a look at CSS3 Animations. I am not that good with CSS3 so I can't provide any solution but afaik CSS3 can do stuff like this.

http://www.w3schools./css3/css3_animations.asp