CSSでのアニメーション

CSS のアニメーションには、@keyframes と anime-* の 2 つの部分があります。

@keyframes アットルール

最初の部分では @keyframes を定義する必要があります。

これにより、アニメーションの継続時間のさまざまな時点で適用する CSS スタイルを指定できます。

さまざまな時点は % 値で指定されます。 0 ～ 100% の間でオフセット位置をいくつでも指定できます。

from はオフセット 0% に使用でき、to はオフセット 100% と同じです。

    @keyframes anim-name {
        from { css-style-a }
        to { css-style-b }
    }

以下の CSS スタイルは、1 つのプロパティ (background-color) に対して 3 つの時点に対して指定されています。

    @keyframes colorit {
        0% { background-color: red; }
        50% { background-color: yellow; }
        100% { background-color: silver; }
    }

複数のプロパティを指定することもできます。

    @keyframes colorit {
        0% { 
            background-color: red; 
            left: 0px; 
            top: 50px;
        }
        50% { 
            background-color: yellow; 
            left: 50px; 
            top: 75px;
        }
        100% { 
            background-color: silver; 
            left: 200px;
            top: 25px;
        }
    }

アニメーション-* プロパティ

アニメーションの UI/UX を与えるためにスタイルの遷移がどのように行われるかを制御するために使用できるプロパティのリストを次に示します。

• アニメーション構成
• アニメーション遅延
• アニメーションの方向
• アニメーション期間
• アニメーションフィルモード
• アニメーション反復回数
• アニメーション名
• アニメーションの再生状態
• アニメーション範囲
• アニメーション範囲の終了
• アニメーション範囲開始
• アニメーションタイムライン
• アニメーションタイミング関数

このサブプロパティのそれぞれは、アニメーションのいくつかの側面を設定します。

以下は、3 秒間実行される colorit という名前の @keyframes の定義です。

    div.box {
        ...
        animation-name: colorit;
        animation-duration: 3s;
        ...
    }

アニメーションの短縮表現を使用して、すべてのサブプロパティを 1 行で指定できます。

animation: 3s colorit;

ブラウザは必要な計算を実行し、適切なアニメーションをレンダリングします。

同様に、アニメーション プロパティを使用すると、デザイナーがビジョンを達成するために、遅延、タイミング、回数 (反復)、方向などを制御できます。

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