web-dev-qa-db-ja.com

CSSチェーン遷移アニメーション

ページが読み込まれたら、3つのDIVを次々に "表示"します。

これどうやってするの？

私はマウスオーバーで単一のdivを表示する方法を知っていますが、CSSを使用して次々にトリガーをかけずに、そのようなスムーズな遷移をどのように実現できますか？

htmlcsscss-animations
20
Phil

トリックは、最初にアニメーションを実行してすべての要素を非表示にし（ページが読み込まれたとき）、それを要素に表示するアニメーションにチェーンすることです。これは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>

注：スライドインアニメーションから1％の線を削除して、スライドイン中にフェードインします。
注：IEはCSS3アニメーションをまだサポートしていません。

23
Ozzy

おそらく探しているのは、CSSトランジションのアニメーションコールバックです。 Fabrizio Stellutoがこのトピックについて すばらしい記事 を書いて、この問題に取り組むためのいくつかのアプローチを示しました。

JQueryを使用している場合、 plugin がこのために（もちろん...）既に記述されているため、機能検出（スニッフィング）のオーバーヘッドを回避できます。 jQueryでJavaScriptアニメーション呼び出しを通常使用する場合と同じように、つまりアニメーションコールバックを使用して追加のコールバックを呼び出すように、CSS遷移をチェーンするために使用できます。

さらに、ここでStackOverflowにいくつかの質問が投稿されていました。

10
Eliran Malka

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デモ

4
ROFLwTIME