CODEWITHSUNDEEP
cssanimationcss-animations
Boris Litvinsky
Boris Litvinsky

Reputation: 437

CSS Animations delay and play-state behavior

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.

Upvotes: 19

Views: 3043

Answers (4)

Mohammed Moustafa
Mohammed Moustafa

Reputation: 630

Try this code: Is compatible with all the browsers especially safari.

div {
  width: 100%;
  background-color: #fff;
  position: relative;
  -webkit-animation-name: example;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 5s;
  /* Chrome, Safari, Opera */
  -webkit-animation-delay: 5s;
  /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 5s;
  animation-delay: 5s;
  -webkit-animation-iteration-count: 100;
  /* Chrome, Safari, Opera */
  animation-iteration-count: 100;
  
}
/* Chrome, Safari, Opera */

@-webkit-keyframes example {
  25% {
    background-color: blue;
  }
  50% {
    background-color:yellow ;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
}
/* Standard syntax */

@keyframes example {
  25% {
    background-color: blue;
  }
  50% {
    background-color:yellow ;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
}
<div>Color bar</div>

If you want it not 100 times, You can take it out and add 100s to duration, because I'm not sure what you want

let me know if you have any question.

Upvotes: 1

br0tat0
br0tat0

Reputation: 539

This should work in Safari: Fiddle

    @-webkit-keyframes change {
      0% { background-color: yellow; }
      100% { background-color: blue; }
    }

    div {
        -webkit-animation-name: change;
        -webkit-animation-delay: 0s;
        -webkit-animation-duration: 5s;
        -webkit-animation-play-state: running;
        -webkit-animation-timing-function: cubic-bezier(0.29, 0.3, 0.86, 0.99);
    }

Playing with the cubic-bezier curve can replicate the animation of stopping then starting at 5s out of 100s but it'll be pretty hard to start and stop the animation without javascript.

Upvotes: 1

clickbait
clickbait

Reputation: 2998

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.

Upvotes: 2

Frankey
Frankey

Reputation: 3757

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/

Upvotes: 3

Related Questions