css chain transition animation

once the page is loaded, I want to “appear” three DIVs one after another.

how can I do this?

I know how to make a single div appear on mouseover but without any triggering, one after another using css, how can I achieve such smooth transition?

Problem courtesy of: Phil

Solution

The trick is to perform an animation first to hide all of the elements (when the page loads), and chain that to the animation that will reveal the elements. This is a working example for you in 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:

I slid in
I'm 2nd
I'm 3rd

Note: Remove the 1% line from the slideIn animation to fade in while sliding in.

Note: IE does not support CSS3
animations yet.

Solution courtesy of: Ozzy

Discussion

What you probably are looking for are animation callbacks
for CSS transitions. Fabrizio Stelluto wrote a great article
on the topic, demonstrating several approaches for tackling this very issue.

If you are using jQuery, you can avoid the overhead of feature detection (sniffing) as a plugin
has already been written (of course…) for this purpose. You can use it to chain CSS transitions much like you would normally do using JavaScript animation calls under jQuery, i.e. using the animation callbacks to invoke additional callbacks.

In addition, several questions had been posted here on StackOverflow which you may find of use:

Discussion courtesy of: Eliran Malka

Using a framework such as jQuery Transit
, you can accomplish this with the following:

Javascript:

$(document).ready(function () {

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

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

HTML:

CSS:

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

JS Fiddle Demo

Discussion courtesy of: ROFLwTIME

This recipe can be found in it’s original form on Stack Over Flow
.

责编内容来自:CSS3 Recipes (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » css chain transition animation

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录