BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

css3]アニメーションとトランジションの違いについて

2022-02-03 21:15:55

CSS3アニメーションとJSアニメーションの違いについて

JSはフレームアニメーションを実装している
CSS3によるインターバルアニメーションの実装

  • フレームアニメーション：タイマーを使って、一定時間ごとに現在の要素を変化させます。
  • インターバルアニメーション：トランジション（状態が変化するたびにアニメーションするトランジションを追加）アニメーション（複数のノードでアニメーションを制御）パフォーマンスが向上する

トランジション

transition はアニメーションの簡易版とも言えるプロパティで、使い勝手の良さからイベントトリガーと組み合わせて使われることが多いです

transitionのプロパティ値

<テーブル 説明 属性 トランジションプロパティ 遷移が必要なプロパティで、all, not block, noneなども可能です。 遷移時間 あるプロパティから別のプロパティへの遷移にかかる時間を指定する。デフォルト値は 0 で、これは変化が即座に起こり、遷移の効果が見えないことを意味する トランジションタイミング機能 はトランジションのためのアニメーションのタイプです。利用可能なタイプは、liner（均一）、ease-in（減速）、ease-out（加速）ease-in-out（加速の後に減速）、cubic-bezier：3次ベジェ曲線、これはカスタマイズ可能です。 トランジションディレイ 遷移動作を検出し、一定時間遅延させてから実行を開始することを指定する

トランジション機能

遷移はイベント（ホバー擬似クラスの追加など）によって引き起こされる必要があり、ページがロードされたときに自動的に起こることはできません。
一度だけで、何度も起動させない限り、繰り返し使用することはできません。
開始状態と終了状態の2つの状態のみ
遷移ルールは1つの属性しか定義できない 

<body>
    <div ></div>
</body>
<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: lightpink;
        transition: width 1s 0.5s ease-in-out;
    }

    .box:hover {
        width: 200px;
    }
</style>

その効果は次のとおりです。

また、このコードを hover で 

transition: width 1s 0.5s ease-in-out
.box:hover {
    width: 200px;
    transition: width 1s 0.5s ease-in-out;
}


<body>
    <div ></div>
</body>
<style>
.box {
    height: 200px;
    width: 200px;
    animation: 3s type forwards alternate infinite;
    animation-play-state: running;
}

.box:hover {
    animation-play-state: paused;
}

@keyframes type {
    from {
        background: yellowgreen
    }

    50% {
        background: yellow
    }

    to {
        background: aquamarine
    }
}
</style>

実際にホバーでの書き込みはうまくいくのですが、要素から外れると遷移せずにすぐに要素の幅が元に戻ってしまうのです
理由は簡単で、トランジションはホバー時にのみ書き込まれ、つまりマウスが上に移動した時にのみ擬似クラスが有効になるためです。

アニメーション

アニメーションのプロパティ値

<テーブル 属性 説明 アニメーション名 keyframesで定義されたアニメーションと同じ名前で呼び出すために使用します。 アニメーション時間 アニメーションが一巡するのにかかる秒数またはミリ秒を指定します。デフォルトは0 アニメーションタイミング機能 速度曲線、transition-timing-functionと同様、利用可能なタイプはliner（均一）、ease-in（減速）、ease-out（加速）ease-in-out（加速後減速）、3次ベジェ：3次ベジェ曲線、カスタマイズ可能。 アニメーションディレイ アニメーションを開始するタイミングを指定します、デフォルトは0です アニメーションの繰り返し回数 アニメーションの再生回数を指定します。デフォルトは1 アニメーション方向 デフォルトのnormalに設定すると、アニメーションはループするたびに順方向に再生されます。alternate（回転）に設定すると、偶数時に順方向に、奇数時に逆方向に再生されます（animation-iteration-countに1以上の値を設定すると有効です）。 アニメーション再生状態 を実行している場合、この値を使用すると、要素のアニメーションの最初からではなく、一時停止した位置から、一時停止、一時停止、一時停止と再生することができます。 アニメーションフィルモード animation-fill-mode プロパティは、アニメーションが終了した後の要素のスタイルを制御します。主な値は次の 4 つです: none（デフォルト、アニメーションが開始されていないときの状態に戻る） forwards（アニメーション終了後も終了時の状態のまま） backwords（最初のフレームの状態に戻る） and both（アニメーション方向に従って順方向と逆方向のルールが順番に適用される）。 

<body>
    <div ></div>
</body>
<style>
.box {
    height: 200px;
    width: 200px;
    animation: 3s type forwards alternate infinite;
    animation-play-state: running;
}

.box:hover {
    animation-play-state: paused;
}

@keyframes type {
    from {
        background: yellowgreen
    }

    50% {
        background: yellow
    }

    to {
        background: aquamarine
    }
}
</style>

マウスインで一時停止、マウスアウトで色変更継続

トランスフォーム

まず注意すべきは、transform プロパティは静的で、スタイルに書き込まれるとすぐに直接表示され、アニメーションは発生しないことです
transformプロパティを使用すると、要素を移動（translate）、拡大縮小（scale）、回転（rotate）、反転（skew）させることができ、より詳しいパラメータはCSS3 transformプロパティで確認できます。

概要

<テーブル 区別する トランジション アニメーション を自動的に実行することは可能ですか？ いいえ、ホバーなどのイベントによってトリガーされる必要があります。 できます 再発する可能性がある ただし、一度でもトリガーされた場合は除く 可 複数の状態を含むことができる いいえ、開始と終了の状態のみ はい、例えば、0%から100%までの任意の遷移状態を指定します。 一時停止機能 いいえ、1回限り はい、例えばホバーイベントは一時停止をトリガーします。 速度プロファイルを定義できるか できます。 缶 プロパティ値の遷移を定義することができる 可能 缶

アニメーションやトランジションに関する詳しい情報は、Script Houseの他の関連記事でご覧いただけます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します