Question

我有一个不让我睡觉的问题。

假设我有这些div：

<div class="container">

    <div class="sixteen columns">
        <div class="dark animated fadeOutRight"><img src="images/dark.gif"></div>
        <h2 class="motto">aspettaci...</h2>
    </div>

</div>

使用animate.css动画（但我认为任何动画都很好）。

我想创建一个在页面中传输的div序列。例如。

div1 - ＆gt;淡出然后
在n秒之后div2 - ＆gt;滑入然后 div2 - ＆gt;滑出然后div3来了，停止......

我尝试延迟，但它一团糟，div2总是在页面上可见。我真的不知道该怎么做。也许我必须将所有div移出页面，或者我可以用jQuery以简单的方式执行此操作？

Answer 1

您可以使用-webkit-animation-duration和-webkit-animation-delay来模拟效果。

DEMO：http://jsfiddle.net/4bWvQ/

HTML：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

CSS：

#div1{
    // Some Stuff 
    -webkit-animation-name:move;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode: forwards;
}

#div2{
    // Some Stuff 
    -webkit-animation-name:move;
    -webkit-animation-duration:2s;
    -webkit-animation-delay:1s;
    -webkit-animation-fill-mode: forwards;
}

#div3{
    // Some Stuff 
    -webkit-animation-name:move;
    -webkit-animation-duration:1s;
    -webkit-animation-delay:2s;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes move{
    from{ // Some Stuff }
    to{ // Some Stuff  }
}

考虑为浏览器兼容性添加所有前缀

Answer 2

我理解你一个接一个地寻找触发动画......其中一个简单的方法是通过“.animate（）”方法。

$( "#div1" ).animate({
   opacity: 0
   }, 5000, function() {
   // 1st Animation complete.
   // start 2nd animation.
       $( "#div2" ).animate({
          opacity: 0
          }, 5000
       );
});

希望这很有帮助。如果你能更清楚地解释你想要实现的目标，那将会有所帮助

队列css过渡

2 个答案: