CSSキーフレームとは何ですか

css キーフレームは、CSS アニメーションの期間の動作を定義し、単純なアニメーションを作成するために使用できる CSS3 のルールです。キーフレーム ルールは、キーワード「@keyframe」とその後に指定されたアニメーションで構成されます。名前の識別子。

#この記事の動作環境: Windows10 システム、css3、thinkpad t480 コンピューター。

推奨: 「

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

CSS @keyframes とは何ですか?用途は何ですか?

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

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

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

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

css @keyframes の使用例:

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%」キーフレーム ルールと 1 つの宣言ブロックを作成した場合)、@keyframes ルールは、最後のキーフレームがその時点のキーフレーム情報を提供するために使用されることを指定します。 @keyframes 複数のキーフレームで同じキーフレーム セレクター値が指定されている場合、ルールにはカスケードはありません。

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