css链转换动画

Question

一旦页面加载,我想一个接一个地"出现"三个DIV.

我怎样才能做到这一点？

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

Answer 1

诀窍是首先执行动画以隐藏所有元素(当页面加载时),并将其链接到将显示元素的动画.这是PURE CSS和HTML中的一个工作示例:

CSS:

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; } 
      } 
]
    

HTML:

<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写了一篇关于这个主题的精彩文章,展示了解决这个问题的几种方法.

如果您正在使用jQuery,则可以避免功能检测(嗅探)的开销,因为已经为此目的编写了一个插件(当然......).您可以使用它来链接CSS转换,就像在jQuery下使用JavaScript动画调用一样,即使用动画回调来调用其他回调.

此外,在StackOverflow上发布了一些您可能会发现的问题:

• 回调CSS过渡
• 完成CSS3动画时是否有回调
• CSS3转换完成后回调