CSS Animations delay and play-state behavior

Question

I am trying to capture a specific moment in elements animation. Meaning - I want the animation to start and stop at point X (lets say start and stop on second 5 of 100s animation).

Here is my shot at it JSFiddle

@-webkit-keyframes background {
  from { background: yellow; }
  100% {
    background: blue;
  }
}

div {
  -webkit-animation-name: background;
  -webkit-animation-duration: 100s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: -40s;
  -webkit-animation-play-state: paused;
}

This seems to work great in Chrome and Firefox but doesnt seem to work in Safari and IE(no way, right?!) Note: I left the prefix in on purpose to test it on Safari specifically.

Unlike in Chrome, it seems like the animation never starts in Safari and remains on the initial step.

Is this a known issue? Is there a workaround or another way to implement this?

UPDATE/CLARIFICATION

What i need is to be able to capture a specific FRAME of the animation. Open my fiddle in Chrome and play around animation-delay attribute in my fiddle (make sure it remains negative). What you will see is that you are able to catch 1 specific frame of the animation. Thats exactly what I need. My problem is that this doesnt work in Safari.

Answer 1

What about creating a keyframe animation of 5 seconds and make sure there is ' 100ms in percentage' where the frames are the same.

Since the animation scale for time is in percentages, we can calculate that 100ms/5000ms is equal to 2%/100%.

div {
    background:#333;
    padding:10px;
    width:100px;
    height:100px;
    color:#fff;
    animation-name: animateAndPause;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
@keyframes animateAndPause {
    0% { 
     -ms-transform: rotate(0deg); /* IE 9 */
     -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
     transform: rotate(0deg);
    }
    98% {      
     -ms-transform: rotate(360deg); /* IE 9 */
     -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
     transform: rotate(360deg); 
    }   
   100% { 
     -ms-transform: rotate(360deg); /* IE 9 */
     -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
     transform: rotate(360deg);    
    }
}

for the purpose of demonstration, the jsfiddle has a longer pause, 500ms.

https://jsfiddle.net/bfu9wvxt/5/

Answer 2

If you want your animation to stop and start at a specific point, you need more keyframes:

@-webkit-keyframes background {
    0% { background: yellow; }
    /* When You Want */% { background: /* A different color in-between yellow and blue! */; }
    /* When You Want */% { background: /* A different color in-between yellow and blue! */; }
    100% { background: blue; }
}
div {
    -webkit-animation-name: background;
    -webkit-animation-duration: 100s;
    -webkit-animation-timing-function: ease;
}

Replace the first /* When You Want */% with a percentage of the animation duration where you want it to stop.

Replace the second /* When You Want */% with a percentage of the animation duration where you want it to start again.

Replace both occurrences of /* A different color in-between yellow and blue! */ with the same color, a color between yellow and blue.