CSS3 & Jquery Animation - Repeat after some seconds

Question

I have created a css3 animation following like this

http://jsfiddle.net/WXHjN/

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.

Answer 1

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

Answer 2

Please use the below code

animation-iteration-count: infinite;

Demo: fiddle link