20

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

我怎样才能做到这一点？

我知道如何使单个div出现在鼠标悬停但没有任何触发的情况下，一个接一个地使用css，我怎样才能实现这样的平滑过渡？

4

3 回答 3

23

诀窍是首先执行动画以隐藏所有元素（当页面加载时），然后将其链接到将显示元素的动画。这是纯 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 动画。

于 2012-05-05T12:42:35.467 回答
10

您可能正在寻找的是CSS 过渡的动画回调。Fabrizio Stelluto 写了一篇关于这个主题的精彩文章，展示了解决这个问题的几种方法。

如果您使用 jQuery，则可以避免特征检测（嗅探）的开销，因为已经为此目的编写了一个插件（当然......）。您可以使用它来链接 CSS 过渡，就像您通常在 jQuery 下使用 JavaScript 动画调用所做的那样，即使用动画回调来调用额外的回调。

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

于 2012-05-05T12:51:43.980 回答
4

使用诸如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 小提琴演示

于 2013-03-22T14:57:51.430 回答