一般的なCSS3アニメーションの実装方法

1. 何ですか

CSS アニメーションは、CSS を使用して拡張マークアップ言語 (XML) 要素をアニメーション化できるようにする、カスケーディングスタイルシート用の提案されたモジュールです。

要素が徐々にあるスタイルから別のスタイルに移行するプロセスを指します。

一般的なアニメーション効果には、移動、回転、拡大縮小など、多数あります。複雑なアニメーションは、複数の単純なアニメーションを組み合わせたものです。

CSS を使用してアニメーションを実装する方法はいくつかあります。

トランジションはグラデーションアニメーションを実装します
変換アニメーション
アニメーションはカスタムアニメーションを実装します

2. 実装

トランジションはグラデーションアニメーションを実装します

遷移のプロパティは次のとおりです。

プロパティ: 変更が必要なCSSプロパティを入力します
期間: トランジション効果を完了するのに必要な時間単位 (秒またはミリ秒)
タイミング関数: 完成したエフェクトのスピードカーブ
delay: アニメーション効果の遅延トリガー時間

タイミング関数の値は次のとおりです。

価値	説明する
リニア	等速（cubic-bezier(0,0,1,1)に等しい）
容易に	遅い状態から速い状態へ、そして再び遅い状態へ (cubic-bezier(0.25,0.1,0.25,1))
イーズイン	徐々に速くなります（cubic-bezier(0.42,0,1,1)に等しい）
イージーアウト	ゆっくり減速します（cubic-bezier(0,0,0.58,1)に等しい）
イージーインアウト	最初は速く、その後遅くなり（cubic-bezier(0.42,0,0.58,1)に等しい）、徐々に現れて消えていきます。
3次ベジェ(n,n,n,n)	3次ベジェ関数で独自の値を定義します。可能な値は0〜1です。

注: display:none<->display:block など、すべてのプロパティがトランジションで使用できるわけではありません。

例えば、マウスを動かすと変化するアニメーション効果を実現するには

<スタイル>
       .base {
            幅: 100ピクセル;
            高さ: 100px;
            表示: インラインブロック;
            背景色: #0EA9FF;
            境界線の幅: 5px;
            境界線のスタイル: solid;
            境界線の色: #5daf34;
            遷移プロパティ: 幅、高さ、背景色、境界線の幅;
            遷移期間: 2秒;
            遷移タイミング関数: イーズイン;
            遷移遅延: 500ms;
        }

        /*略語*/
        /*遷移: すべて 2 秒のイーズイン 500 ミリ秒;*/
        .base:hover {
            幅: 200ピクセル;
            高さ: 200px;
            背景色: #5daf34;
            境界線の幅: 10px;
            境界線の色: #3a8ee6;
        }
</スタイル>
<div> </div>

変換アニメーション

よく使用される 4 つの関数が含まれています。

翻訳: 変位
スケール: ズーム
回転: 回転
傾斜: 傾き

一般的には遷移過剰で使用される

transform はインライン要素をサポートしていないため、使用する前にブロックに変換する必要があることに注意してください。

例えば

<スタイル>
    .base {
        幅: 100ピクセル;
        高さ: 100px;
        表示: インラインブロック;
        背景色: #0EA9FF;
        境界線の幅: 5px;
        境界線のスタイル: solid;
        境界線の色: #5daf34;
        遷移プロパティ: 幅、高さ、背景色、境界線の幅;
        遷移期間: 2秒;
        遷移タイミング関数: イーズイン;
        遷移遅延: 500ms;
    }
    .base2 {
        変換: なし;
        遷移プロパティ: transform;
        遷移遅延: 5ms;
    }

    .base2:ホバー{
        変換: スケール(0.8, 1.5)、回転(35度)、傾斜(5度)、移動(15px, 25px);
    }
</スタイル>
 <div> </div>

ボックスが回転、傾斜、移動、拡大されていることがわかります。

アニメーションはカスタムアニメーションを実装します

アニメーションは、次の 8 つのプロパティの略称です。

財産	説明する	プロパティ値
アニメーション期間	アニメーションがサイクルを完了するのに必要な時間を秒（s）またはミリ秒（ms）で指定します。デフォルト値は0です。
アニメーションタイミング関数	アニメーションのタイミング関数、つまりアニメーションの速度曲線を指定します。デフォルトは「ease」です。	直線的、イージー、イージーイン、イージーアウト、イージーインアウト
アニメーション遅延	アニメーションの遅延時間、つまりアニメーションが開始する時間を指定します。デフォルト値は 0 です。
アニメーションの繰り返し回数	アニメーションを再生する回数を指定します。デフォルト値は 1 です。
animation-directionはアニメーションの再生方向を指定します	デフォルトは通常	通常、逆、交互、交互逆
アニメーションフィルモード	アニメーションの塗りつぶしモードを指定します。デフォルトはなし	前方、後方、両方
アニメーション再生状態	アニメーションの再生状態（実行中または一時停止）を指定します。デフォルトでは実行中	実行中、一時停止中
アニメーション名	@keyframesアニメーションの名前を指定します

CSS アニメーションでは、いくつかのキーフレームを定義するだけで、ブラウザーはタイミング関数の補間に基づいて残りのフレームを計算します。

@keyframes でキーフレームを定義する

したがって、要素を円状に回転させたい場合は、開始フレームと終了フレームを定義するだけで済みます。

@keyframes 回転{
    から{
        変換: 回転(0度);
    }
    に{
        変換: 回転(360度);
    }
}

From は最初のフレームを意味し、to は最後のフレームを意味します。

ライフサイクルを説明するためにパーセンテージを使用することもできます

@keyframes 回転{
    0%{
        変換: 回転(0度);
    }
    50%{
        変換: 回転(180度);
    }
    100%{
        変換: 回転(360度);
    }
}

キーフレームを定義したら、それを直接使用できます。

アニメーション: 2秒回転;

結論

財産	意味
遷移	要素のスタイルを設定するために使用されます。アニメーションに似た効果がありますが、詳細は大きく異なります。
変身	要素を回転、拡大縮小、移動、または傾けるために使用されます。スタイルアニメーションの設定とは関係ありません。これは、要素の「外観」を設定するために使用される色と同等です。
翻訳する	これは単なる変換のプロパティ値であり、つまり移動する
アニメーション	アニメーションのプロパティを設定するために使用されます。6 つのプロパティを含むショートカットプロパティです。

上記は、一般的な CSS3 アニメーションの実装方法の詳細な内容です。CSS3 アニメーションの実装の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<: MySQL の複合インデックスはどのように機能しますか?

>>: jQueryのコア機能とイベント処理の詳細な説明