css链式过渡动画

Question

一旦页面加载完毕，我想一个接一个地“出现”三个DIV。

我该怎么做？

我知道如何让单个div出现在mouseover上但没有任何触发，一个接一个地使用css，我怎样才能实现这样的平滑过渡？

Answer 1

诀窍是首先执行动画以隐藏所有元素（当页面加载时），然后将其链接到将显示元素的动画。这是 PURE CSS & HTML 中的一个工作示例：

div.slideIn { 
          position: absolute; 
          top: 200px; 
          width: 100px; 
          height: 100px; 
          border: 1px solid black; 
          animation-name: hide, slideIn;
          animation-duration: 5s;
          animation-timing-function: ease-in;
          animation-iteration-count: 1; 
          -moz-animation-name: hide, slideIn;
          -moz-animation-duration: 5s;
          -moz-animation-timing-function: ease-in;
          -moz-animation-iteration-count: 1; 
          -webkit-animation-name: hide, slideIn;
          -webkit-animation-duration: 5s;
          -webkit-animation-timing-function: ease-in;
          -webkit-animation-iteration-count: 1; 
          -o-animation-name: hide, slideIn;
          -o-animation-duration: 5s;
          -o-animation-timing-function: ease-in;
          -o-animation-iteration-count: 1; 
          opacity: 1;
      } 
      div.slideIn.first {
          left: 50px; 
          animation-delay: 0s, 0s;
          -moz-animation-delay: 0s, 0s;
          -webkit-animation-delay: 0s, 0s;
          -o-animation-delay: 0s, 0s;
      }
      div.slideIn.second {
          left: 150px;
          animation-delay: 0s, 2s;
          -moz-animation-delay: 0s, 2s;
          -webkit-animation-delay: 0s, 2s;
          -o-animation-delay: 0s, 2s;
      }
      div.slideIn.third {
          left: 250px;
          animation-delay: 0s, 4s;
          -moz-animation-delay: 0s, 4s;
          -webkit-animation-delay: 0s, 4s;
          -o-animation-delay: 0s, 4s;
      }
      @keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @-moz-keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @-webkit-keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @-o-keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
      @-moz-keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
      @-webkit-keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
      @-o-keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
]
    

<div class="slideIn first">I slid in</div> 
    <div class="slideIn second">I'm 2nd</div> 
    <div class="slideIn third">I'm 3rd</div> 

注意：从 slideIn 动画中删除 1% 的线以在滑入时淡入。
注意：IE 还不支持 CSS3 动画。

Answer 2

您可能正在寻找用于 CSS 过渡的动画回调。 Fabrizio Stelluto 就这个话题写了a great article，展示了解决这个问题的几种方法。

如果您使用 jQuery，则可以避免特征检测（嗅探）的开销，因为已经为此目的编写了（当然...）plugin。您可以使用它来链接 CSS 转换，就像您通常在 jQuery 下使用 JavaScript 动画调用一样，即使用动画回调来调用其他回调。

此外，在 StackOverflow 上发布了几个问题，您可能会发现它们有用：

• Callback on CSS transition
• Is there a callback on completion of a CSS3 animation
• Callback when CSS3 transition finishes

Answer 3

使用 jQuery Transit 等框架，您可以通过以下方式完成此操作：

Javascript：

$(document).ready(function () {

    showDiv($('div:first'));

    function showDiv(div) {
        div.transition({
            opacity: 1
        }, 1000, function () {
            //call back
            showDiv(div.next("div"));
        });
    }
});

HTML：

<div></div>
<div></div>
<div></div>

CSS：

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background-color: black;
    float: left;
    opacity: 0;
}

JS Fiddle Demo