css3の@keyframeとは何ですか

この記事の内容は、css3の@keyframesとは何かを紹介し、@keyframesがどのように使えるのかを簡単に理解してもらうことです。困っている友人は参考にしていただければ幸いです。

CSS3 @キーフレームとは何ですか?用途は何ですか?

@keyframes は、CSS アニメーションの期間の動作を定義し、単純なアニメーションを作成するために使用できる CSS3 のルールです。 [おすすめの関連ビデオ チュートリアル: CSS3 チュートリアル ]

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

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

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

/* 定义动画*/
@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; これは、アニメーション ループ中に要素が何度か上下に移動することを意味します。

@キーフレーム ルール 単純なアニメーションの作成例:

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

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

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

css コード

body {
  background-color: #fff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
  margin: 50px auto;
  min-width: 320px;
  max-width: 500px;
}

.element {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #0099cc;
  border-radius: 50%;
  position: relative;
  top: 0;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

@keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

3実行エフェクト

#上記の例では、「bounce」という名前のアニメーションに 5 つのキーフレームが割り当てられています。最初のキーフレームと 2 番目のキーフレームの間 (つまり、「0%」と「25%」の間) では、イーズアウト タイミング関数を使用します。 2 番目と 3 番目のキーフレームの間 (つまり、「25%」と「50%」の間) では、イーズイン タイミング機能などを使用します。この効果は、要素が上に 50 ピクセル移動すると表示され、最高点に達すると速度が低下し、150 ピクセルに戻ると速度が上がります。アニメーションの後半も同様に機能しますが、要素は 25 ピクセル上に移動するだけです。このアニメーションは、跳ねるボールのアニメーションをシミュレートするために使用できる跳ねるエフェクトを作成します。

注:

@keyframes ルールはカスケードされないため、アニメーションが複数の @keyframes ルールからキーフレームを派生することはありません。

キーフレーム セットを決定するには、セレクター内のすべての値を時間の増加順に並べ替える必要があります。重複がある場合 (たとえば、2 つの「50%」キーフレーム ルールと宣言ブロックを記述した場合)、@keyframes ルールは、最後のキーフレームがその時点のキーフレーム情報を提供するために使用されることを指定します。 @keyframes 複数のキーフレームで同じキーフレーム セレクター値が指定されている場合、ルールにはカスケードはありません。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がcss3の@keyframeとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。