3

簡単な質問があります（と思います）。

次のような CSS3 アニメーションをチェーンする方法はありますか。

    #element { animation: fadeIn 5s 0s linear, fadeOut 5s 25s linear ; }

    @keyframes fadeOut {
        from { opacity:1; }
        to { opacity:0; }
    }

    @keyframes fadeIn {
        from { opacity:0; }
        to { opacity:1; }
    }

この場合、異なる要素を異なる遅延で fadingIn と fadingOut できると思います。どうもありがとう、ライオネル

4

1 に答える 1

1

はい、0%、25% などの増分を使用して、アニメーション全体を連鎖させることができます。

このフィドルを見てください。

私が行ったことは、インクリメントを使用してアニメーションを 1 つの大きなチェーンにすることです。

@-webkit-keyframes move {
0%   {top:  100px;
      left: 100px;
      -webkit-transform: rotate(135deg);}
25%  {top:  250px;
      left: 250px;
      -webkit-transform: rotate(135deg);}
50%  {top:  100px;
      left: 250px;
      -webkit-transform: rotate(0deg);}
75%  {top:  250px;
      left: 100px;
      -webkit-transform: rotate(-135deg);}
100% {top:  100px;
      left: 100px;
      -webkit-transform: rotate(0deg);}
}

% のタイミングは、アニメーションが変化する停止位置であるため、オブジェクトがフェード インおよびフェード アウトするタイミングを変更するには、それに応じてパーセンテージを変更します。

于 2012-12-27T22:13:56.943 に答える