CSS3&；Jquery动画-几秒钟后重复

我已经创建了一个css3动画如下

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

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

在上面的示例中，动画仅一次发生。

---

我需要这个动画在几秒钟后重复。此外，它必须无限次重复。

请使用以下代码

animation-iteration-count: infinite;

---

您也可以尝试以下逻辑

$(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类并设置Timeout以执行显示文本的函数

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

---

您需要在某个时候删除该类，否则您不会添加任何内容，因此不会添加动画。与相关。虽然这里的解决方案并不能完全做到这一点，但本博客指出了重置动画的问题。