jQuery循环和重置自定义css动画

我有一个动画横幅，它应该重新启动动画时，它完成了，我的问题是横幅动画只有一次。 这是我使用的jQuery代码：

FourshatiAnimation();

function FourshatiAnimation() {
/* One */
$forshati_text.addClass('forshati-text-trans');

$forshati_logo.delay(1000).queue(function(next) {
    $(this).addClass('forshati-logo-trans');
});

$download_btn.delay(2000).queue(function(next) {
    $(this).addClass('dwn-btn-trans');
});

$forshati_one.delay(4500).fadeOut('slow');


/* Two */
$icon_two.delay(5000).queue(function(next) {
    $(this).addClass('icon-img-trans');
    next(); 
    $text_two.delay(1000).queue(function(next) {
        $(this).addClass('forshati-txt-trans');
    });

    $forshati_text.removeClass('forshati-text-trans');
    $forshati_logo.removeClass('forshati-logo-trans');
    $download_btn.removeClass('dwn-btn-trans');
});

$forshati_two.delay(9000).fadeOut('slow');
$icon_two.removeClass('icon-img-trans');
$text_two.removeClass('forshati-txt-trans');
window.setTimeout(function() { FourshatiAnimation() }, 10000)
}

---

.

好的，我已经做了一个作品的演示-->

您可以查看页面源以复制css，并进行调整。我已经解释如下

我正在使用关键帧运行动画。它们不完全受支持，但常规css动画也不受支持

你可能需要调整位置和时间来达到完美。 下面是关键帧的示例。它通过名称item1创建动画，并根据动画通过的距离设置属性

@keyframes item1{
    0%   {opacity: 1; left: -200px;}
    15%  {opacity: 1: left: 200px;}
    50%  {opacity: 0; left: 200px;}
    100% {opacity: 0; left: -200px;}
}

触发动画如下：调用动画的名称item1、持续时间，然后告诉它重复

.forshati-text{
          animation: item1 10s infinite;
  -webkit-animation: item1 10s infinite;
}

当你看到CSS时。我把@keyframes放在第一位。 每个@keyframes有四个供应商前缀。因此，如果调整它，请小心，确保为相同的动画名称更改所有四个。例1

---

希望有帮助

控制台是否显示任何错误？@James遗憾的是，没有，只有动画本身没有重复。是的，我注意到了，但不幸的是，我不知道如何使代码同步运行。现在我的问题中包括了一个实例。顺便说一下，我看了一下，但它对我不起作用。@BilalKhoukhi这里是一个更新版，它不完全起作用。但问题是。淡出，因为你没有淡出。还有其他问题，但这是第一步。我已经尝试过这个解决方案，但不幸的是，它不起作用。你能建议一个完全不同的方法吗？感谢you@BilalKhoukhi是的，但我明天要过一段时间才能到达。

@keyframes
@-webkit-keyframes
@-moz-keyframes
@-o-keyframes