Speed up blink timer using CSS3 animation

Question

I'm building a quiz app with a timer (from 10s - 0s). When the amount of time is approaching the 0s, I want my text to blink faster and faster. When the timer is around 10s I want a transition time of 2 seconds decreasing when there is less time left.

Is there a way to fix this with CSS3?

Answer 1

You can set an animation with different keyframes, and setting the duration of every keyframe shorter and shorter

div {
    font-size: 40px;
    -webkit-animation: blink 10s 2s;
    animation: blink 10s 2s;
}

@-webkit-keyframes blink {
    0%  {color: blue;}
   10%  {color: yellow;}
   20%  {color: blue;}
   29%  {color: yellow;}
   38%  {color: blue;}
   46%  {color: yellow;}
   54%  {color: blue;}
   61%  {color: yellow;}
   68%  {color: blue;}
   74%  {color: yellow;}
   80%  {color: blue;}
   85%  {color: yellow;}
   90%  {color: blue;}
   92%  {color: yellow;}
   94%  {color: blue;}
   96%  {color: yellow;}
   98%  {color: blue;}
  100%  {color: yellow;}
 }

@keyframes blink {
    0%  {color: blue;}
   10%  {color: yellow;}
   20%  {color: blue;}
   29%  {color: yellow;}
   38%  {color: blue;}
   46%  {color: yellow;}
   54%  {color: blue;}
   61%  {color: yellow;}
   68%  {color: blue;}
   74%  {color: yellow;}
   80%  {color: blue;}
   85%  {color: yellow;}
   90%  {color: blue;}
   92%  {color: yellow;}
   94%  {color: blue;}
   96%  {color: yellow;}
   98%  {color: blue;}
  100%  {color: yellow;}
 }

<div>TEST</div>