CSS アニメーションとトランジション: クイックガイド

導入

CSS アニメーションとトランジションは、Web ページに命を吹き込む強力なツールです。これらを使用すると、ユーザー エクスペリエンスを向上させる、スムーズで魅力的で視覚的に魅力的な効果を作成できます。状態間の単純な遷移を追加する場合でも、注目を集める複雑なアニメーションを追加する場合でも、これらの機能の基本を理解することが不可欠です。このガイドでは、フェードイン効果の作成方法、CSS トランジションとアニメーションの違い、無限キーフレーム アニメーションの作成、アニメーションの開始を遅らせる方法について説明します。トランジション、アニメーション タイミング関数を使用してバウンス効果を作成します。

各例に追加した Codepens を使用して、コードを操作して遊ぶことができます!

CSS アニメーションを使用してフェードイン効果を作成するにはどうすればよいですか?

フェードイン効果を作成するには、@keyframes ルールを使用してアニメーションの段階を定義できます。キーフレームはアニメーションの開始状態と終了状態を指定し、アニメーション プロパティはアニメーションを要素に適用します。以下に例を示します:

このコード内:

• .fade-in クラスは、イーズインアウト タイミング関数を使用して、フェードイン アニメーションを 2 秒間適用します。

• @keyframes fadeIn ルールはアニメーションを定義し、不透明度を 0 から 1 に変更します。

CSS トランジションとアニメーションの違いは何ですか?

CSS トランジション:

• 要素がある状態から別の状態に変化するときの単純な状態変化に使用されます。

• トランジションを開始するにはトリガー (:hover、:focus、または :checked など) が必要です。

• 初期状態から最終状態までプロパティを自動的に補間します。

この例では、ホバーすると .box 要素の背景色が 0.5 秒かけて青に変わります。

CSS アニメーション:

• 複数のステージを含む、より複雑なアニメーションのシーケンスに使用されます。

• @keyframes を使用して定義されており、開始にトリガーは必要ありません。

• 自動的に実行し、無限にループし、タイミングとシーケンスをより詳細に制御できます。

この例では、.rotate クラスは、2 秒ごとに 1 回完全に回転する連続回転アニメーションを適用します。

無限に実行されるキーフレーム アニメーションを作成するにはどうすればよいですか?

無限に実行されるアニメーションを作成するには、animation-iteration-count プロパティの値を無限に使用します。これにより、アニメーションが無限にループします。以下に例を示します:

.spin クラスは要素を継続的に回転させ、2 秒ごとに 1 回完全に回転させます。

CSS トランジションの開始を遅らせるにはどうすればよいですか?

トランジションの開始を遅らせるには、transition-delay プロパティを使用します。このプロパティは、トランジションが開始するまで待機する時間を指定します。以下に例を示します:

この例では、:hover イベントがトリガーされてから 2 秒後に背景色がホットピンクに変わり、遷移が完了するまでに 0.5 秒かかります。

アニメーション タイミング関数を使用してバウンス効果を作成するにはどうすればよいですか?

animation-timing-function プロパティをカスタム cubic-bezier 値または事前定義されたキーワードとともに使用して、さまざまな効果を作成できます。バウンス効果の場合、キーフレームを定義し、イージングまたはカスタムの 3 次ベジェ値を使用できます。以下に例を示します:

この例では:

• @keyframes バウンス ルールは、要素を上下に移動することでバウンス効果を定義します。

• .bounce クラスは、イーズ タイミング関数を使用して 2 秒ごとに無限に繰り返されるバウンス アニメーションを適用します。

結論

この記事がお役に立てば幸いです。また次回お会いしましょう!

以上がCSS アニメーションとトランジション: クイックガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。