How to put a delay on each loop animation in css3?

Question

I'm trying to stop a loop animation for a duration, at the end.

animation: 6s linear 2s infinite;

I've tried to put animation delay for 2 second with css3 shorthanded animation properties but it didn't worked.

How to achivhe this ?

http://www.w3schools.com/cssref/css3_pr_animation-delay.asp

Edit: This method solved my problem: stackoverflow.com/a/32223950/1428241

For the question asked in title - no, `animation-delay` doesn't work that way. You would have to manually introduce the delay by tweaking the keyframe settings. Have a look at this thread for details - http://stackoverflow.com/questions/32223835/repeat-animation-every-3-seconds/32223950#32223950. It is a very similar question. — Harry, Aug 29 '15 at 13:57

Nillervision · Answer 1 · 2015-08-28T23:28:28.800

2

I don't think you can stop an animation with CSS alone. But you can use JS to change the class attribute to a class without animation after a while.

var element = document.getElementById('myElement');
setTimeout(function(){ element.className = 'newClass'; }, 2000);

EDIT: Here is a fiddle http://jsfiddle.net/Nillervision/8ncgs94k/

edited Aug 28 '15 at 23:28

answered Aug 28 '15 at 23:09

Nillervision

451
2
10

Mr.YellowMan · Accepted Answer · 2015-08-29T18:48:35.760

0

Use:

Calling the keyframe via animation:

animation:keyFrameName 6s infinite;
-webkit-animation:keyFrameName 6s infinite;
-moz-animation:keyFrameName 6s infinite;
-o-animation:keyFrameName 6s infinite;


Making a delay for animation:

animation-delay:2s;
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
-o-animation-delay:2s;

That should be set in each animation class or id that you have an animation on

edited Aug 29 '15 at 18:48

answered Aug 28 '15 at 22:39

Mr.YellowMan

98
7

I might mis understood your question, your trying to make a animation stop at some point from infinite to 1? – Mr.YellowMan Aug 28 '15 at 22:51
hi mate, there is no animation delay in your example /: – Barlas Apaydin Aug 29 '15 at 18:27

score 0 · Answer 3 · answered Aug 28 '15 at 23:24

Think you're just missing the animation name.

li {
           /* name, dur, func, delay, iterations */
    animation: woohoo 2s linear 3s infinite
}
li:last-child {
    animation-delay: 8s;
}

@keyframes woohoo {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
ul { max-width: 90%; overflow: hidden; }

<ul>
  <li>Lorem ipsum dolor</li>
  <li>sit amet</li> 
  <li>consectetur adipisicing elit</li>
  <li>Earum deleniti itaque</li>
</ul>

will thanks for the effort but your animation does not have animation delay property /: — Barlas Apaydin, Aug 29 '15 at 18:29

How to put a delay on each loop animation in css3?

3 Answers3