CSSアニメーションは何で構成されていますか?-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2021-11-18 17:53:01

オリジナル

2458 人が閲覧しました

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

ログイン後にコピー

ランニング効果:

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

##'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 サイトの他の関連記事を参照してください。