web-dev-qa-db-ja.com

CSS：アニメーションと遷移

したがって、CSS3トランジションとアニメーションの両方を実行する方法を理解しています。明確ではないが、私がグーグルで調べたのは、どちらを使用するかです。

たとえば、ボールをバウンスさせたい場合、アニメーションが最適な方法であることは明らかです。キーフレームを提供すれば、ブラウザが中間フレームを実行し、ニースのアニメーションが作成されます。

ただし、どちらの方法でも上記の効果を達成できる場合があります。簡単で一般的な例は、facebookスタイルのスライド式引き出しメニューの実装です。

この効果は、次のような移行によって実現できます。

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

または、次のようなアニメーションを通じて：

.sf-page {
    -webkit-animation-duration: .4s;
    -webkit-transition-timing-function: ease-out;
}

.sf-page.in {
    -webkit-animation-name: sf-slidein;
    -webkit-transform: translate3d(0, 0, 0);
}

.sf-page.out {
    -webkit-animation-name: sf-slideout;
    -webkit-transform: translateX(240px);
}

@-webkit-keyframes sf-slideout {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}

@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

次のようなHTMLを使用します。

<div class="sf-container">
    <div class="sf-page in" id="content-container">
        <button type="button">Click Me</button>
    </div>
    <div class="sf-drawer">
    </div>
</div>

そして、これに付随するjQueryスクリプト：

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    // below is only required for css animation route
    $("#content-container").toggleClass("in");
});

私が理解したいのは、これらのアプローチの長所と短所です。

  1. 明らかな違いの1つは、アニメーション化により多くのコードが必要になることです。
  2. アニメーションにより柔軟性が向上します。スライドインとスライドインで異なるアニメーションを使用できます
  3. パフォーマンスについて言えることはありますか。両方ともハードウェアアクセラレーションを利用しますか？
  4. どちらがより現代的で、今後の方法
  5. 他に追加できるものはありますか？
csscss3css-transitionscss-animations
133
Code Poet

いつ行うかではなく、どのように行うかを把握しているようです。

遷移はアニメーションであり、2つの異なる状態（開始状態と終了状態）の間で実行されるものです。引き出しメニューのように、開始状態を開いて終了状態を閉じることができ、その逆も可能です。

）ではないが特に開始状態と終了状態を伴うものを実行する場合、またはより詳細な粒度が必要な場合トランジションのキーフレームを制御する場合、アニメーションを使用する必要があります。

177
Adam

定義は、Merriam-Websterによると、それ自体を語らせます：

移行：あるフォーム、ステージ、またはスタイルから別のフォーム、ステージ、またはスタイルへの移動、開発、または進化

アニメーション：生命または生命の質に恵まれています。動きだらけ

名前はCSSの目的に適切に適合します

したがって、指定した例では遷移を使用する必要があります。これは、ある状態から別の状態への変更のみであるためです

36
Zach Saucier

  1. 同じトランジションを何度も使用している場合を除き、アニメーションはより多くのコードを必要とします。その場合、アニメーションの方が優れています。

  2. アニメーションなしでスライドインおよびスライドアウトするためのさまざまな効果があります。元のルールと変更されたルールの両方で異なる遷移を行うだけです。

    .two-transitions {
    transition: all 50ms linear;
}

.two-transitions:hover {
    transition: all 800ms ease-out;
}

  3. アニメーションは遷移の単なる抽象化であるため、遷移がハードウェアアクセラレーションである場合、アニメーションは高速化されます。違いはありません。

  4. どちらも非常にモダンです。

  5. 私の経験則では、同じトランジションを3回使用すると、おそらくアニメーションになります。これは、将来の保守と変更が容易です。ただし、一度だけ使用する場合は、アニメーションを作成するためのタイピングが多くなり、価値がない場合があります。

10
paulcpederson

短い答え、まっすぐに：

遷移：

  1. トリガー要素が必要（：hover、：focusなど）
  2. 2つのアニメーション状態（開始および終了）のみ
  3. より単純なアニメーションに使用（ボタン、ドロップダウンメニューなど）
  4. 作成は簡単ですが、アニメーション/エフェクトの可能性はそれほど多くありません

アニメーション@keyframes：

  1. 無限のアニメーションに使用できます
  2. 3つ以上の状態を設定できます
  3. 境界線なし

どちらもCPUアクセラレーションを使用して、よりスムーズな効果を実現します。

9
Grecdev

アニメーションはまさにそれです-プロパティのセットのスムーズな動作。言い換えると、要素のプロパティのセットに何が起こるかwhatを指定します。アニメーションを定義し、この一連のプロパティがアニメーションプロセス中にどのように動作するかを説明します。

トランジション反対側で、プロパティを変更する必要があるhowを指定します。各変更。 JavaScriptまたはCSSを使用して特定のプロパティに新しい値を設定することは常に移行ですが、デフォルトではスムーズではありません。 CSSスタイルでtransitionを設定することにより、これらの変更を実行するための異なる（滑らかな）方法を定義します。

transitionsは、実行されるべきデフォルトanimationを定義していると言えます指定されたプロパティが変更されるたびに。

3
Jonan Georgiev

パフォーマンスについて言えることがありますか。両方ともハードウェアアクセラレーションを利用しますか？

最新のブラウザでは、プロパティfilter、opacity、およびtransformに対してh/wアクセラレーションが発生します。これは、CSSアニメーションとCSSトランジションの両方に対応しています。

2
Eric Willigers