CSS, Javascript or jQuery blinking element on load

Question

This is what should happen.

1. Page loads
2. It does nothing for 1 second
3. Then it makes the element "blink" four times (with about 600 ms delay)
4. Done!

Language to use

Use CSS, Javascript or jQuery to solve it. It should work on common browsers and devices.

The blink

With blink I mean fade from one background color to another. The fade-time should be changable.

Fiddle

https://jsfiddle.net/cjkkr5h0/

HTML

<div>Make me blink 4 times on load (600 ms)!</div>

<p>CSS, Javascript or jQuery. Make it simple, make it short. Should work on mobile devices and common browser versions.</p>

CSS

div {
    background: #90a5b7;

    /* NOT SO IMPORTANT */
    padding: 10px;
    color: #fff;
    display: inline-block;
    font-family: Arial;
}

.blink-to {
    background: #2a5b84;
}

How is it done the best way?

Answer 1

You can try something like this. DEMO

var count = 0
// DOES NOTHING FOR 1 SEC
setTimeout(function () {
  var interval = setInterval(function () {

      $("#blinker").toggleClass(function(){
          count++
          return "blink"
      });

     // Reason it is 8 because it is counting the fadeIn and FadeOut  
     if (count == 8) 
         clearInterval(interval);

    }, 600)
}, 1000);