CSS3における@keyframesキーフレームアニメーションのセレクターバインディングの詳細説明

CSS3 では、@keyframes を通じてキーフレーム アニメーション効果を作成できます。 @keyframes をセレクターにバインドする必要があります。そうしないと効果が表示されません。同時に、アニメーションの長さとアニメーション名も定義する必要があります

文法

@keyframes animationname {keyframes-selector {css-styles;}}

名前必須。アニメーションの名前を定義します。 キーフレームセレクター必須。アニメーションの継続時間の割合。

値	説明

CSS3 では、変化が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。このうち、0% がアニメーションの開始時刻、100% がアニメーションの終了時刻です。

キーフレーム セレクター
@keyframes にいくつかのアニメーション ルールを追加しましょう:

@keyframes sunrise {   
   0% {   
      bottombottom: 0;   
      left: 340px;   
      background: #f00;   
   }   
  
   33% {   
      bottombottom: 340px;   
      left: 340px;   
      background: #ffd630;   
   }   
  
   66% {   
      bottombottom: 340px;   
      left: 40px;   
      background: #ffd630;   
   }   
  
   100% {   
      bottombottom: 0;   
      left: 40px;   
      background: #f00;   
   }   
}

これらの新しいアニメーション ルールを追加することで、キーフレーム セレクターを導入します。上記のコード例では、0%、33%、66%、および 100% がキーフレーム セレクターです。このうち、0%と100%は「from」と「to」に置き換えることができます。

例の 4 つのアニメーション ルール セットは、このアニメーション要素の 4 つの状態 (4 つのキー フレーム) と、これらの 4 つの状態にあるときのスタイルを表します。これらの未定義の状態 (たとえば、34% から 65%) は、これらの定義された状態間の遷移状態を構成します。
仕様はまだ改訂中ですが、ユーザーが遵守すべきルールがいくつかあります。たとえば、キーフレームが書き込まれる順序は重要ではなく、パーセンテージの昇順で再生されます。したがって、「to」キーフレームを「from」キーフレームの前に配置しても、アニメーションの再生は変わりません。さらに、to または from または対応するパーセンテージを指定しない場合、ブラウザによって自動的に追加されます。したがって、@keyframes の構文は、一般的な CSS 構文のカスケード カバレッジ ルールに準拠していません。

以上がCSS3における@keyframesキーフレームアニメーションのセレクターバインディングの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。