CSS animation delay in repeat

Question

I recently discovered how to “use” CSS animations “correctly” (previously I rejected them as being unable to create complex sequences like you could in JavaScript). So now I find out about them.

For this effect, I am trying to perform a gradient “flash” in the form of an element similar to progress. Similar to influencing Windows Vista / 7's own progress bar.

@keyframes barshine { from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);} } .progbar { animation: barshine 1s 4s linear infinite; } 

As you can see, I am trying to get a delay of 4 seconds, followed by a luster, passing through 1 second, repeating.

However, it seems that animation-delay applies only to the first iteration, after which the brilliance simply continues to swing alternately.

I "resolved" this problem as follows:

 @keyframes expbarshine { from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} 80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);} } .progbar { animation: barshine 5s linear infinite; } 

from and 80% match exactly, which leads to a “delay” of 80% of the length of the animation.

This works, but for my next animation, I need a delay for the variable (constant for a specific element, but a variable among elements using the animation), while the animation itself remains the same length.

With the above “solution”, I get a slower animation when all I want is a longer delay.

Is it possible to use animation-delay for all iterations, and not just for the first?

Answer 1

I had a similar problem and I used

 @-webkit-keyframes pan { 0%, 10% { -webkit-transform: translate3d( 0%, 0px, 0px); } 90%, 100% { -webkit-transform: translate3d(-50%, 0px, 0px); } } 

A bit annoying is that you have to fake your duration to allow for “delays” from both ends.

Answer 2

minitech is correct in that animation-delay indicates the delay before the animation starts and NOT the delay between iterations. The editor of the draft specification describes this well, and there has been a discussion of this function, which you describe here , which suggests this iteration delay function.

Although there may be a workaround in JS, you can fake this iterative delay to flash the progress bar using only CSS.

By declaring a div div position:absolute and a parent div overflow: hidden , setting the 100% state of the keyframe to be larger than the width of the progress bar, and playing with the timer function with a cubic bezier and left offset values, you can emulate ease-in-out or linear with a "delay".

It would be interesting to write less / scss mixin to accurately calculate the left-side offset and time function to get it for sure, but now I don’t have time to play with it. I would like to see something like that!

Here is a demo that I put together to show this. (I tried to imitate the Windows 7 progress bar and fell a little, but it demonstrates what I'm talking about)

Demo: http://codepen.io/timothyasp/full/HlzGu

 <!-- HTML --> <div class="bar"> <div class="progress"> <div class="flare"></div> </div> </div> /* CSS */ @keyframes progress { from { width: 0px; } to { width: 600px; } } @keyframes barshine { 0% { left: -100px; } 100% { left: 1000px; } } .flare { animation-name: barshine; animation-duration: 3s; animation-direction: normal; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.14, .75, .2, 1.01); animation-iteration-count: infinite; left: 0; top: 0; height: 40px; width: 100px; position: absolute; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%, rgba(255,255,255,0) 87%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)), color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ z-index: 10; } .progress { animation-name: progress; animation-duration: 10s; animation-delay: 1s; animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; position:relative; z-index: 1; height: 100%; width: 100%; border-right: 1px solid #0f9116; background: #caf7ce; /* Old browsers */ background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#caf7ce), color-stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* IE10+ */ background: linear-gradient(to bottom, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#caf7ce', endColorstr='#2ab22a',GradientType=0 ); /* IE6-9 */ } .progress:after { content: ""; width: 100%; height: 29px; right: 0; bottom: 0; position: absolute; z-index: 3; background: -moz-linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00caf7ce', endColorstr='#2ab22a',GradientType=1 ); /* IE6-9 */ } .bar { margin-top: 30px; height: 40px; width: 600px; position: relative; border: 1px solid #777; border-radius: 3px; } 

Answer 3

This is what you should do. It should work so that you have a 1 second animation, and then a 4 second delay between iterations:

 @keyframes barshine { 0% { background-image:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%); } 20% { background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%); } } .progbar { animation: barshine 5s 0s linear infinite; } 

So, I talked a lot with this, and you can do it without being very hacked. This is the easiest way to set the delay between iterations of the animation: 1. SUPER EASY and 2. just takes a bit of logic. Check out this dance animation I made:

 .dance{ animation-name: dance; -webkit-animation-name: dance; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; } @keyframes dance { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 50% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes dance { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 20% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } 40% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 60% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 80% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 95% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } } 

I actually came here trying to figure out how to delay the animation when I realized that you just 1. extend the duration of the animation and the shirt in proportion to the time for each animation. Beore I had them each lasting 0.5 seconds for a total duration of 2.5 seconds. Now let me say that I wanted to add a delay equal to the total duration, so the delay is 2.5 seconds.

The animation time is 2.5 seconds and the delay is 2.5, so you change the duration to 5 seconds. However, since you doubled the total duration, you need to halve the proportion of the animation. Check out the latter below. This worked great for me.

 @-webkit-keyframes dance { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 10% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } 20% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 30% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 50% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } 

In total:

These are your calculations, which you are likely to use to figure out how to change the animation duration and% of each part.

required_duration = x

required_duration = animation_part_duration1 + animation_part_duration2 + ... (etc.)

wish_delay = y

total duration = x + y

animation_part_duration1_actual = animation_part_duration1 * wish_duration / total_duration

Answer 4

I'd rather write some JavaScript than make CSS less manageable.

First, apply only CSS animation when changing the data attribute:

 .progbar[data-animation="barshine"] { animation: barshine 1s linear; } 

Then add javascript to switch the animation to half the amount of delay.

 var progbar = document.querySelector('.progbar'); var on = false; setInterval(function () { progbar.setAttribute('data-animation', (on) ? 'barshine' : ''); on = !on; }, 3000); 

Or if you do not want the animation to start when the tab is hidden:

 var progbar = document.querySelector('.progbar'); var on = false; var update = function () { progbar.setAttribute('data-animation', (on) ? 'barshine' : ''); on = !on; setTimer(); }; var setTimer = function () { setTimeout(function () { requestAnimationFrame(update); }, 3000); }; setTimer(); 

Answer 5

Here is a small fragment that shows the same thing in 75% of cases, then it slides. This repeating circuit emulates delay well:

 @-webkit-keyframes slide { 0% {background-position: 0 0;} 25% {background-position: 0 0;} 50% {background-position: 0 0;} 75% {background-position: 0 0;} 100% {background-position: 13em 0;} } @-moz-keyframes slide { 0% {background-position: 0 0;} 25% {background-position: 0 0;} 50% {background-position: 0 0;} 75% {background-position: 0 0;} 100% {background-position: 13em 0;} } @keyframes slide { 0% {background-position: 0 0;} 25% {background-position: 0 0;} 50% {background-position: 0 0;} 75% {background-position: 0 0;} 100% {background-position: 13em 0;} } 

Answer 6

I made a poster on the wall that moves left and right at intervals. For me, this works:

 .div-animation { -webkit-animation: bounce 2000ms ease-out; -moz-animation: bounce 2000ms ease-out; -o-animation: bounce 2000ms ease-out; animation: bounce 2000ms ease-out infinite; -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; transform-origin: 55% 10%; } @-webkit-keyframes bounce { 0% { transform: rotate(0deg); } 3% { transform: rotate(1deg); } 6% { transform: rotate(2deg); } 9% { transform: rotate(3deg); } 12% { transform: rotate(2deg); } 15% { transform: rotate(1deg); } 18% { transform: rotate(0deg); } 21% { transform: rotate(-1deg); } 24% { transform: rotate(-2deg); } 27% { transform: rotate(-3deg); } 30% { transform: rotate(-2deg); } 33% { transform: rotate(-1deg); } 36% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } 

Answer 7

Delay is possible only once at the beginning with infinite. the sort delay does not work with an infinite loop. for this you need to save an example of key frame animation spaces:

 @-webkit-keyframes barshine { 10% {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); } 60% {background: -webkit-linear-gradient(top, #7db9e8 0%,#d32a2d 100%);} } 

it will revive from 10% to 60% and wait for completion by 40% more. So 40% is delayed.

find an example script

Answer 8

I know this is old, but I was looking for the answer in this post, and with jquery you can do it easily and without much hassle. Just declare your animation keyframe in css and set the class with the attributes you need. In my case, I used the tada animation from css animate:

 .tada { -webkit-animation-name: tada; animation-name: tada; -webkit-animation-duration: 1.25s; animation-duration: 1.25s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } 

I wanted the animation to run every 10 seconds, so jquery just adds the class, after 6000 ms (enough time to complete the animation), it removes the class, and after 4 seconds it adds the class again and so the animation starts again.

 $(document).ready(function() { setInterval(function() { $(".bottom h2").addClass("tada");//adds the class setTimeout(function() {//waits 6 seconds to remove the class $(".bottom h2").removeClass("tada"); }, 6000); }, 10000)//repeats the process every 10 seconds }); 

It’s not at all difficult, as one guy wrote.