CSS3＆amp; Jquery动画 - 几秒后重复

Question

我已经像这样创建了一个css3动画

http://jsfiddle.net/WXHjN/

我使用以下Jquery来控制时间间隔

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

在上面的示例中，动画只会立即发生。 我需要这个动画在几秒钟后重复。它也必须在无限时间重复。

Answer 1

您也可以尝试以下逻辑

$(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);
};

逻辑说删除fadeInLeft类和setTimeout来执行显示文本的函数。

我在animationRef变量中存储了timeout的引用以清除超时，不应该在你的代码中使用。

Fiddle Demo

Answer 2

请使用以下代码

animation-iteration-count: infinite;

Demo: fiddle link