CSS3でのアニメーションの利点は何ですか-フロントエンドQ&A-php.cn

CSS3でのアニメーションの利点は何ですか

青灯夜游

リリース： 2022-01-13 16:04:42

オリジナル

1847 人が閲覧しました

css3 でアニメーションを実装する利点: 1. ブラウザーでアニメーションを最適化できます (要素が非表示の場合はアニメーションがなく、FPS への影響が軽減されます); 2. 実装コードは比較的シンプルです; 3. ハードウェアアクセラレーションを使用できます; 4. メインスレッドを占有しません。

CSS3でのアニメーションの利点は何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

一般に、CSS3 アニメーションのプロパティは、transform、transition、アニメーションの 3 つだけです。

transition:1s (トランジションアニメーション効果): ある人物の特定の値から別のトランジション値へ

transform:rotate(300deg) x,y 回転transform:rotageX (300deg) )transform:rotageY(300deg)

transform:scale(0.5,2) x 軸、y 軸のスケール>1 拡大

transform:translateX(100px)Translate x- axistranslateY(100px) y 軸を移動します

transform:translate(100px 100px) x、y 軸を移動します

transition:rotate(300deg)scale(0.5,2)スケーリング中、回転中

#transition:transform 1s は、transform への効果を指定します

transition:margin 1s は、マージンへの効果を指定し、サイズと位置を直接変更し、トランジションなしで変更された構造を表示します。と変形時間

アニメーションの焦点はタイムラインとキーフレームにあり、異なるタイムノードで異なるフレームが異なる変化をするようにフレームを作成することです。一方で、アニメーションと @keyframe に基づくアニメーションも同様です。パフォーマンスと動作の分離を達成することを目的としています

小さな例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>逐帧动画</title>
    <style type="text/css">
        .a{
            width: 1000px;
            height: 400px;
            background: #bbb;
            position: relative;
            margin: 100px auto;
            overflow: hidden;

        }
        .b{
            font-size: 50px;
            width: 400px;
            height: 150px;
            position: absolute;
            top:-150px;
            left: 50px;
            text-align: center;
            background: #aaa;
            line-height: 150px;
            animation:s 2s infinite;
        }   
        .c{
            font-size: 50px;
            width: 400px;
            height: 150px;
            position: absolute;
            bottom:-150px;
            right: 50px;
            background: #ccc;
            line-height: 150px;
            animation:ss 2s infinite;
        }
        @keyframes ss{
            0%{
                transform:translateY(0px);
                background: #888;
            }
            50%{
                transform:translateY(-90px);
                background: #7dd;
            }
            50%{
                transform:translateY(-150px);
                background: #3aa;
            }
        }
        @keyframes s{
            0%{
                transform:translateY(0px);
                background: #888;
            }
            50%{
                transform:translateY(90px);
                background: #7dd;
            }
            50%{
                transform:translateY(150px);
                background: #3aa;
            }
        }
    </style>
</head>
<body>
    <header>
        <div>
            <div>啦啦啦啦啦啦啦啦</div>
            <div>啦啦啦啦啦啦啦啦</div>
        </div>
    </header>
</body>
</html>

ログイン後にコピー

css3 を使用してアニメーションを実装する利点

1ブラウザはアニメーションを最適化できます (要素は表示されません。アニメーションがないため、FPS への影響が軽減されます)

2. 実装コードは比較的単純です

3. ハードウェアアクセラレーションを使用できます

4. メインスレッドを占有しない

欠点:

1. 互換性が低い。

2. アニメーションコントロールの柔軟性が十分ではなく、実行中のプロセスが弱く、バインディングコールバック関数をアタッチできず、特定の位置にコールバック関数を追加したり、再生イベントをバインドしたりすることができず、進行状況がありません。報告。

(学習ビデオ共有:

css ビデオチュートリアル)

以上がCSS3でのアニメーションの利点は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。