アニメーションを定義するために CSS3 のどのようなルールが使用されているか

CSS3 の「@keyframes」ルールを使用してアニメーションを定義します。 「@keyframes」ルールは、CSS アニメーションのサイクルの動作を定義し、単純なアニメーションを作成できるアニメーション ルールを指定するために使用されます。アニメーション シーケンス サイクル中の中間ステップは、アニメーション シーケンスに沿ってキーフレームを確立することによって指定できます。

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

@keyframes は、CSS アニメーションの期間の動作を定義し、単純なアニメーションを作成するために使用できる CSS3 のルールです。

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

次に、さまざまな CSS アニメーション プロパティを使用して、アニメーションの反復回数、開始値と終了値を交互にするかどうか、アニメーションを実行するか一時停止するかなど、アニメーションのさまざまな側面を制御できます。 。アニメーションによって開始時間が遅れることもあります。

@キーフレーム ルールは、キーワード「@keyframe」、その後にアニメーションの名前を指定する識別子 (アニメーション名を使用して参照されます)、その後に一連のスタイル ルール (カーリーで区切られたもの) で構成されます。ブレース） 。次に、アニメーション名属性の値として識別子を使用して、アニメーションが要素に適用されます。

構文:

@keyframes animation-name {keyframes-selector {css-styles;}}

• ##animation-name: これは必須であり、アニメーション名を定義します。

• keyframes-selector: アニメーションの割合を 0% ～ 100% の範囲で定義します。アニメーションには多くのセレクターを含めることができます。

/* 定义动画n */
@keyframes your-animation-name {
    /* style rules */
}
/* 将其应用于元素 */
.element {
    animation-name: your-animation-name;
    /* 或者使用动画速记属性 */
    animation: your-animation-name 1s ...
}

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

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    100% {
        background-color: blue;
    }
}

0%" と "100%" はキーフレーム セレクターであり、それぞれキーフレーム ルールを定義します。 キーフレーム ルールのキーフレーム宣言 ブロックは属性で構成されます

それぞれ 0% と 100% の代わりにセレクター キーワード from と to を使用することもできます (これらは同等です)。パーセンテージ値を区切るか、from キーワードと to キーワードを使用します。パーセンテージ値にはパーセンテージ単位指定子を使用する必要があることに注意してください。したがって、「0」は無効なキーフレーム セレクターです。(学習ビデオ共有 :

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

注: ブラウザーを最適にサポートするには、常に 0% および 100% セレクターを指定してください。

css @keyframes の使用例:

#1. アニメーションが発生する空間を定義します#HTML コード:

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

2. @keyframes ルールを使用して簡単なアニメーションを作成します

#css コード

#

<div class="container">
  <div class="element"></div>
</div>

3. ランニング効果

プログラミング関連の知識については、こちらをご覧ください。アクセス: プログラミングビデオ!!

以上がアニメーションを定義するために CSS3 のどのようなルールが使用されているかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。