CSSアニメーションは何で構成されていますか?

CSS アニメーションは、キーフレーム、アニメーション プロパティ、CSS プロパティの 3 つの部分で構成されます。キーフレームは、さまざまな段階でのアニメーションのステータスを定義するために使用されます。アニメーション プロパティは、再生時間、再生回数、アニメーションの再生に使用する関数を決定するために使用されます。CSS 属性は、さまざまなキーフレームでの CSS 要素のステータスを指定するために使用されます。 . .

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

CSS アニメーションは、キーフレーム (キーフレーム)、アニメーション プロパティ (プロパティ)、CSS プロパティの 3 つの部分で構成されます。

• キーフレーム (キーフレーム) - さまざまな段階でのアニメーションの状態を定義します。

• アニメーション プロパティ (プロパティ) - アニメーションの再生時間、再生回数、アニメーションの再生に使用する関数などを決定します。 (オーディオおよびビデオプレーヤーと比較できます)

• css 属性 - さまざまなキーフレームの下での css 要素のステータスを指定します。

1. キー フレーム

は @keyframes ルールを使用して指定され、これを使用してサイクルを定義できます。 CSS アニメーション ビヘイビアを使用すると、単純なアニメーションを作成できます。

アニメーションは、時間の経過とともに変化する CSS プロパティを表現するという点でトランジションに似ています。主な違いは、プロパティ値が変更されると (たとえば、ホバーでプロパティ値が変更される場合)、トランジションが暗黙的にトリガーされるのに対し、アニメーション化されたプロパティが適用されるとアニメーションが明示的に実行されることです。したがって、アニメーションでは、アニメーション化されたプロパティの明示的な値を示す必要があります。これらの値は、@keyframes ルールで指定されたアニメーション キーフレームによって定義されます。したがって、@keyframes ルールは、属性値が時間の経過とともにどのように変化するかを記述する、カプセル化された CSS スタイル ルールのセットで構成されます。

2. アニメーション属性

#@keyframes を通じてアニメーションを作成する場合、要素にアニメーションを適用するにはアニメーション属性が必要です。アニメーションの反復回数、開始値と終了値を交互に切り替えるかどうか、アニメーションを実行するか一時停止するかを設定します。

アニメーション属性は、プレーヤーの関連機能として理解できます。最も基本的なプレーヤーには、再生/一時停止、再生時間、再生順序 (逆方向/順方向/代替再生)、ループ数などが含まれます。

animation:
[animation-name] [animation-duration] // アニメーションの名前と継続時間
[animation-timing-function][animation-lay] // 関数について時間 (properties/t)、遅延時間
[animation-iteration-count] [animation-direction] // 再生回数、再生順序
[animation-fill-mode] [animation-play-state] ; // 再生前または停止後に対応するスタイルを設定し、アニメーションの実行または一時停止を制御します

キーフレーム アニメーション属性の構文:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

@keyframes ルールの中括弧の中には何が入っていますか?

中括弧内で、アニメーション中の特定の時点でアニメーション化されるプロパティの値を指定するキーフレームまたはウェイポイントを定義する必要があります。これにより、アニメーション シーケンスの中間ステップを制御できるようになります。たとえば、単純なアニメーション @keyframe は次のようになります:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    background-color: red;
    }
}
.demo{
 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

ランニング効果:

##'0%'、'50%'、'100% ' はすべてキーフレーム セレクターであり、各セレクターはキーフレーム ルールを定義します。キーフレーム ルールのキーフレーム宣言ブロックは、属性と値で構成されます。

上のアニメーションは単純なトランジション効果に似ています。背景色はアニメーションの開始時にある値 (0%) から変化し、中央の値 (50%) に達し、別の値に達します ( 100) アニメーションの最後に %)。 「0%」、「50%」、および「100%」キーフレーム セレクターは、アニメーション化されたプロパティの値を変更するウェイポイントまたはパーセンテージ ポイントを定義します。それぞれ 0% と 100% を使用する代わりに、セレクター キーワード from と to を使用することもできます。これらは同等です。

@keyframes change-bg-color {
   from{
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    to{
    background-color: red;
    }
}

キーフレーム セレクターは、1 つ以上のカンマ区切りのパーセンテージ値、または from キーワードと to キーワードで構成されます。パーセント値にはパーセント単位指定子を使用する必要があることに注意してください。したがって、「0」は無効なキーフレーム セレクターです。

以下は、複数のカンマ区切りのパーセンテージ値やキーワード キーフレーム セレクター from および to を含むキーフレーム セレクターを使用したアニメーションの例です。

@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

上記の @keyframes ルール定義: 要素の上部オフセットは、アニメーションの開始時、途中、終了時にはゼロになり、アニメーションの最初の時点ではゼロになります。 -4 分の 1 と 4 分の 3 の距離。100px; これは、アニメーション ループ中に要素が数回上下に移動することを意味します。

(学習ビデオ共有:

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

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