2

This question is partly duplicated, but not completely. I know how to add intervals to my own animation but now the animation I'm talking about is from animate.css. I want to add intervals to its animation, say, shake. How?

lzl124631x
  • 4,485
  • 2
  • 30
  • 49

3 Answers3

1

Try using javascript to achieve this.

Using -

    $(".ani").delay(700).each(function(index) {
        $(this).delay(700*index).fadeIn(500);
    });

Add the class="ani" to your elements which require the delays and play with the timings (in milliseconds) to achieve the delays and trigger timings.

Using animation-iteration-count: x; you can control the number of times the animation is triggered.

Hope this helps.

masmrdrr
  • 559
  • 3
  • 14
0
   h1 {
  animation-duration: 3s;
  animation-name: shake;
  animation-iteration-count: infinite;
animation-delay: 3s;
}
@keyframes shake{
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

check this link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

i hope this is useful for you

animation execute continue after 3s because we define animation-duration: 3s; and why animation execute continue after one time because we define animation-iteration-count: infinite;

Parth Chavda
  • 1,819
  • 1
  • 23
  • 30
  • But the animations are defined in animate.css and there are numerous different animations. I don't want to define the animation one by one again in my css. – lzl124631x Nov 03 '15 at 13:39
  • you just change in animate.css file you didn't define to again.change in exiting code – Parth Chavda Nov 04 '15 at 09:13
  • I hope not to change the animate.css. More importantly, I only want to add interval between each cycle, I'll have to add a new animation whenever I want a new interval. But maybe your approach is indispensable. – lzl124631x Nov 04 '15 at 11:52
  • using jquery you can add and remove a animation...use set interval....add and remove – Parth Chavda Nov 04 '15 at 12:18
  • eh, seemingly I should only achieve this either by copying&pasting&slightly modifying the css or by using JS. – lzl124631x Nov 04 '15 at 12:40
-1

Just give it an id and apply css. #animationID { animation-duration: 2s; }

Ryan89
  • 1,216
  • 15
  • 20
  • I've used this but this only prolongs the animation duration, isn't it? – lzl124631x Nov 03 '15 at 13:35
  • do you mean `animation-iteration-count: 5;` – Ryan89 Nov 03 '15 at 13:41
  • No. In my exp, setting the animation-duration on an element with "rubberBand animated", for example, only makes the animation slower, and each cycle of animation actually is played consecutively, without intervals in between. – lzl124631x Nov 03 '15 at 13:48
  • `animation-delay: 4s;` will delay from initially starting the animation but you may need jQuery for what you are try to do. – Ryan89 Nov 03 '15 at 13:59
  • Yes. animation-delay only adds delay before the first cycle of animation but not all of them... – lzl124631x Nov 04 '15 at 11:48