CSS3 & Jquery Animation - Repeat after some seconds

Question

I have created a css3 animation following like this

I am using the following Jquery to control time interval

$(document).ready(function(){
    $('#web').addClass("fadeInLeft");
    window.setTimeout(function(){
        $('#development').addClass("fadeInLeft");
    },300)
});

In the above example the animation happening at once only. I need this animation to repeat after some seconds. Also it must be repeat at infinity times.

You need to remove the class at some point, or else you are not adding anything, therefore no animation. — Kerry Jones, Jan 22 '14 at 06:03

score 1 · Accepted Answer · answered Jan 22 '14 at 06:34

You can also try below logic

$(document).ready(function(){
    animateItems();
});

var animationRef;

function animateItems()
{
    $('#web').removeClass("fadeInLeft");
    $('#development').removeClass("fadeInLeft");

    window.setTimeout(function(){
        $('#web').addClass("fadeInLeft");},300);

  window.setTimeout(function(){
      $('#development').addClass ("fadeInLeft");
  },600);

     animationRef = window.setTimeout(animateItems,2000);
};

The logic says remove fadeInLeft class and setTimeout to execute function that displays text.

I have stored reference of timeout in animationRef variable to clear timeout, which should not be used in your code.

Fiddle Demo

Related to http://stackoverflow.com/questions/16050914/css-animation-doesnt-restart-when-resetting-class. And though the solutions here don't quite do it, this blog points out the issues with resetting the animation. http://css-tricks.com/restart-css-animation/ — mr rogers, Jan 22 '14 at 07:00

score 0 · Answer 2 · answered Jan 22 '14 at 06:28

0

Please use the below code

animation-iteration-count: infinite;

Demo: fiddle link

answered Jan 22 '14 at 06:28

Bharathi D

953
1
15
28

CSS3 & Jquery Animation - Repeat after some seconds

2 Answers2