队列css过渡

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 - >淡出然后
n秒后div2 - >滑入然后
div2 - >滑出然后div3来并停止...

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

Answer 1

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

演示： 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  }
}

考虑添加所有前缀以实现浏览器兼容性