@KeyFramesは、スタイルが時間の経過とともにどのように変化するかを定義することにより、CSSアニメーションを有効にします。 1）Fadeinなどの単純な効果を可能にし、不透明度を0から1に増やします。2）バウンスのような複雑なアニメーションは、異なる割合の複數(shù)のキーフレームで作成できます。 3）虹の効果の色のような柔軟でアニメーション化された特性です。 4）パフォーマンスの最適化には、ウィルチェンジの使用、レイアウトトリガーアニメーションの回避、アニメーションライブラリの検討が含まれます。 5）アニメーションJankを防ぐには、RequestAnimationFrameとパフォーマンス監(jiān)視を使用します。 6）ベストプラクティスには、明確な視覚的な手がかり、スパーリングの使用、デバイス全體のスムーズなアニメーションの確保が含まれます。

CSSアニメーションは、最新のWebデザインの定番となっており、開発者はJavaScriptや畫像に依存せずに動的で魅力的なユーザーインターフェイスを作成できます。これらのアニメーションの中心には、アニメーションシーケンスを定義するCSSの強力な機能である@keyframesルールがあります。 @keyframesの世界に飛び込み、Webプロジェクトを実現(xiàn)する可能性を活用する方法を探りましょう。

@keyframesルールは、CSSアニメーションを可能にするものです。これにより、時間の経過とともにアニメーションの動作を指定して、要素のスタイルが最初から最後にどのように変化するかを定義できます。これは、他の方法で実裝するのが面倒なスムーズな遷移と複雑なアニメーションを作成するのに特に役立ちます。

@keyframes動作しているのを見るための簡単な例から始めましょう：

 @KeyFrames Fadein {
  から {
    不透明：0;
  }
  に {
    不透明：1;
  }
}

。要素 {
  アニメーション：Fadein 2s;
}

この例では、 fadeInアニメーションは、2秒間で0から1の要素の不透明度を徐々に増加させます。 fromとfrom toキーワードは、それぞれアニメーションの開始狀態(tài)と終了狀態(tài)を定義します。

しかし、 @keyframes単なる単純なフェードイン効果以上のものです。アニメーションのタイムラインの異なる割合で複數(shù)のキーフレームを定義することにより、複雑なアニメーションを作成できます。

 @KeyFrames Bounce {
  0％、20％、50％、80％、100％{
    変換：翻訳（0）;
  }
  40％{
    変換：翻訳（-30px）;
  }
  60％{
    変換：翻訳（-15px）;
  }
}

。要素 {
  アニメーション：バウンス1S Infinite;
}

このbounceアニメーションは、アニメーションサイクルのさまざまなポイントで要素を上下に移動することにより、バウンス効果を作成します。 infiniteキーワードにより、アニメーションが無期限に繰り返されます。

@keyframesの最も強力な側面の1つは、その柔軟性です。単純な変換や不透明度から複雑な色の変化やフィルター効果まで、ほぼすべてのCSSプロパティをアニメーション化できます。これは、色を変えるアニメーションの例です。

 @KeyFramesレインボー{
  0％{background-color：red; }
  14％{background-color：オレンジ; }
  28％{background-color：黃色; }
  42％{background-color：緑; }
  57％{background-color：青。 }
  71％{background-color：indigo; }
  85％{background-color：violet; }
  100％{background-color：赤; }
}

。要素 {
  アニメーション：レインボー5S線形無限。
}

このrainbowアニメーションは、一連の色を循環(huán)し、各色相間の滑らかな遷移を作成します。 linearタイミング関數(shù)は、アニメーションが一定の速度で進行することを保証します。

@keyframes非常に用途が広いですが、プロジェクトで使用する際には留意すべき考慮事項があります。特に複雑なアニメーションを扱ったり、同時に多くの要素をアニメーション化する場合は、パフォーマンスが重要な要素です。アニメーションを最適化するためのヒントを次に示します。

• will-changeを使用して、ブラウザに今後の変更を通知し、レンダリングを最適化できるようにします。

   。要素 {
    ウィルチェンジ：変換、不透明。
  }

• widthやheightなどのレイアウトの再計算をトリガーするプロパティのアニメーションを避けてください。代わりに、可能な限りtransformとopacityを使用します。これらはアニメーションに最適化されているためです。

• 追加の機能と最適化を提供するため、より複雑なアニメーションには、Anime.jsやGreensock（GSAP）などのCSSアニメーションライブラリを使用することを検討してください。

@keyframesで作業(yè)するときの1つの一般的な落とし穴は、アニメーションJankの可能性であり、アニメーションが途切れ途切れまたはstuttersです。これは、CPUの使用量やブラウザのレンダリングの制限など、さまざまな要因によって引き起こされる可能性があります。これを軽減するには：

• JavaScriptのrequestAnimationFrame APIを使用して、ブラウザのレンダリングサイクルとアニメーションを同期させます。
• アニメーション內のボトルネックを識別および対処するためのパフォーマンス監(jiān)視ツールを実裝します。
• prefers-reduced-motionメディアクエリを使用することを検討して、モーション感度を持っているか、アニメーションを削減するのを好むユーザーに代替エクスペリエンスを提供します。

ベストプラクティスに関しては、アニメーションをアクセスしやすくユーザーフレンドリーに保つことが重要です。次のようなガイドラインは次のとおりです。

• インタラクティブな要素に明確な視覚的な手がかりを提供し、要素がアニメーション化されたときにユーザーが理解できるようにします。
• アニメーションを控えめに使用して、ユーザーを圧倒したり、メインコンテンツから気を散らしたりしないようにします。
• アニメーションがスムーズで一貫していることを確認してください。

@keyframes 、CSSアニメーションツールキットの基本的なツールであり、魅力的で動的なWebエクスペリエンスを作成するための無限の可能性を提供します。 @keyframesをマスターすることで、Webデザインのスキルを高め、視聴者を魅了するアニメーションを作成できます。 CSSアニメーションの世界を探求しながら、パフォーマンスとアクセシビリティを念頭に置いておくことを忘れないでください。 @keyframesで可能なことの境界を実験して押し上げることを恐れないでください。

以上が@KeyFrames：CSSアニメーションの基礎 - 今すぐ學ぶ！の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。