1

我有一个动画横幅女巫，它应该在完成后重新启动动画，我的问题是横幅动画只有一次。这是我使用的 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)
}

我的 jsFiddle。

4

1 回答 1

0

好的，我已经做了一个演示 --->这里

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

我keyframes用来运行动画。它们不完全受支持，但也不是常规的 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。所以如果你调整它要小心，确保你将所有四个都更改为相同的动画名称。前任。item1

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

希望有帮助！！

于 2013-07-20T19:44:30.023 回答