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

記事ディレクトリ

アニメーション

animationFlash のコマ送りアニメーションに似ており、映画の再生のようなコマ送りアニメーションは、非常に繊細なパフォーマンスと優れた柔軟性を備えています。ただしtransition、指定されるのは開始状態と終了状態のみであり、アニメーションプロセス全体も特定の関数によって制御されます。Flash を勉強したことがある人ならご存知でしょうが、このコマ送りアニメーションはキーフレームで構成されており、多数のキーフレームを連続再生することでアニメーションが形成されますが、CSS3 ではコマ送りアニメーションは属性によって完成しますkeyframes。

アニメーション

これはanimation-name、、、、、、animation-durationのanimation-timing-function短縮形ですanimation-delay。animation-iteration-countanimation-direction

.animation {
    
    
    animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;
}

@キーフレーム

@keyframes animationName {
    
    
    from {
    
    
        properties: value;
    }
    percentage {
    
    
        properties: value;
    }
    to {
    
    
        properties: value;
    }}//or
@keyframes animationName {
    
    
    0% {
    
    
        properties: value;
    }
    percentage {
    
    
        properties: value;
    }
    100% {
    
    
        properties: value;
    }}

animeName: 開発者自身が命名したアニメーション名。
パーセンテージ: これはパーセンテージ値であり、複数のパーセンテージ値を追加できます。
プロパティ: スタイル属性名 (例: color、left、width など)。

アニメ名

これはアニメーションを設定するために使用される名前であり、次の文字で区切って複数のアニメーション名を同時に割り当てることができます。

.animation {
    
    
    animation-name: none | IDENT[,none | IDENT]*;
    }

アニメーション期間

アニメーションの継続時間を設定するために使用されます。単位は s で、デフォルト値は 0 です。

.animation {
    
    
    animation-duration: <time>[,<time>]*;}

アニメーションタイミング関数

遷移タイミング関数と同様:

.animation {
    
    
    animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*;
    }

アニメーション遅延

アニメーションの開始時間を設定します。単位は s または ms、デフォルト値は 0 です。

.animation {
    
    
    animation-delay: <time>[,<time>]*;
    }

アニメーションの反復回数

アニメーションループの数を設定します。デフォルトは 1 で、infinite は無限のループ数です。

.animation {
    
    
    animation-iteration-count:infinite | <number> [, infinite | <number>]*;
    }

アニメーションの方向

これは、アニメーションの再生方向を設定するために使用されます。デフォルト値はノーマルであり、順方向に再生することを意味します。オルタネートとは、アニメーションが偶数回順方向に再生され、奇数回逆方向に再生されることを意味します。

.animation {
    
    
    animation-direction: normal | alternate [, normal | alternate]*;
    }

アニメーションの再生状態

これは主にアニメーションの再生状態を制御するためのものです。実行中は再生を意味し、一時停止は再生の停止を意味します。実行中はデフォルト値です。

.animation {
    
    
    animation-play-state:running | paused [, running | paused]*;
    }

要約する

CSS3アニメーションの 3 つの属性、transform、transitionおよびの紹介が終わりましたのでanimation、それらを確認してみましょう。transformこれは、要素の幾何学的変形として理解できます。これは、規則的であり、見つけることができます。この変形は、アニメーション効果を生成せず、元の形状を変更するだけであり、トゥイーンアニメーションやフレーム単位のアニメーションと非常によく似てtransitionいanimationますflash。中国では、遷移はある状態から別の状態へ、変化が滑らかな効果を持つ場合、アニメーションが生成されます。これは定型的な変化です。風車の回転、車の運転、色など、より通常のアニメーション効果で使用できます。グラデーションなど、animationアニメーション効果がより柔軟になり、映画のような複雑で不規則なアニメーションを実現できます。