CSS アニメーション: ウェブサイトに活力と動(dòng)きを與える魔法

CSS アニメーションは魔法のように機(jī)能し、Web サイトをよりダイナミックで魅力的なものにします。アニメーションを使用すると、Web サイト要素を簡(jiǎn)単に移動(dòng)したり、色を変更したり、サイズをスムーズに変更したりできます。

アニメーションをよりインタラクティブで流動(dòng)的なものにするには、まずアニメーションの基本概念を理解する必要があります。この記事では、アニメーションの動(dòng)作を制御するための基本的なルール構(gòu)文とアニメーションのアニメーション プロパティについて學(xué)習(xí)します。

始めましょう! ?

CSS アニメーションの使用を開(kāi)始するには、2 つの基本コンポーネントを理解する必要があります:

• @keyframes: アニメーション用のブループリント。
• アニメーションのプロパティ: アニメーションの設(shè)定を制御します。

@keyframes

@keyframes はアニメーションのロードマップであり、アニメーションの開(kāi)始點(diǎn)と終了點(diǎn)、およびその間のステップを定義します。

つまり、この部分はアニメーションがどのように開(kāi)始され、途中でどのように実行され、どのように終了するかを定義します。

文法:

<code>@keyframes animationName {
  from {
    /* 開(kāi)始樣式 */
  }
  to {
    /* 結(jié)束樣式 */
  }
}</code>

例:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可見(jiàn) */
  }
  to {
    opacity: 1; /* 可見(jiàn) */
  }
}</code>

この例では、要素の不透明度は 0 から始まり、1 になります。

続行する前に、CSS アニメーションの専門(mén)家になれるこの電子書(shū)籍をチェックしてください:

? CSS アニメーションの基礎(chǔ): ベスト プラクティス、トリック、パフォーマンスのヒント

この電子書(shū)籍では、単純なフェードから複雑なアニメーションまで、CSS アニメーションをマスターするために必要な以下のすべてがカバーされています。

• タイミング機(jī)能
• キーフレームとアニメーションのプロセス
• パフォーマンスの最適化
• 現(xiàn)実世界のアプリケーション

スムーズな CSS アニメーションを作成したい開(kāi)発者に最適です。今すぐコピーを入手してください!

アニメーションのプロパティ

CSS アニメーションをカスタマイズするには、さまざまなプロパティが使用され、それぞれに獨(dú)自の役割があり、アニメーションの動(dòng)作を定義します。

アニメーションのプロパティは要素に直接適用され、アニメーションの名前、期間、遅延、方向などを定義します。

文法:

<code>.element {
  animation-name: fadeIn; /* 動(dòng)畫(huà)名稱或@keyframes */
  animation-duration: 2s; /* 動(dòng)畫(huà)持續(xù)時(shí)間 */
}</code>

例:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 動(dòng)畫(huà)名稱 */
   animation-duration: 2s; /* 動(dòng)畫(huà)持續(xù)時(shí)間 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可見(jiàn) */
   }
   to {
     opacity: 1; /* 可見(jiàn) */
   }
}</code>

この例では、クラス名「box」を持つ要素は最初は非表示ですが、2 秒後に表示されるようになり、滑らかなフェードイン効果が作成されます。

CSS には次のアニメーション プロパティがあります:

• アニメーション名
• アニメーション期間
• アニメーションタイミング関數(shù)
• アニメーション遅延
• アニメーション反復(fù)回?cái)?shù)
• アニメーションの方向
• アニメーションフィルモード
• アニメーションの再生狀態(tài)

それでは、それぞれの屬性を理解しましょう。

アニメーション名

機(jī)能:

この屬性は、どの @keyframes アニメーションを適用するかを定義するために使用されます。

たとえば、fadeIn または fadeOut という名前の 2 つの @keyframe がある場(chǎng)合、animation-name 屬性を使用して、どの要素に fadeIn アニメーションを適用するか、どの要素に fadeOut アニメーションを適用するかを定義できます。

文法:

<code>animation-name: animationName;</code>

例:

<code>animation-name: fadeIn;</code>

アニメーションを?qū)g行するには、animation-name 屬性が必要です。

アニメーション期間

機(jī)能:

このプロパティは、アニメーションの継続時(shí)間、つまりアニメーションの実行にかかる時(shí)間を定義します。

アニメーションの継続時(shí)間を秒 (s) またはミリ秒 (ms) で定義できます。

文法:

<code>@keyframes animationName {
  from {
    /* 開(kāi)始樣式 */
  }
  to {
    /* 結(jié)束樣式 */
  }
}</code>

例:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可見(jiàn) */
  }
  to {
    opacity: 1; /* 可見(jiàn) */
  }
}</code>

animation-duration を定義しない場(chǎng)合は、自動(dòng)的に 0 秒 (デフォルト) に設(shè)定され、事実上アニメーションが無(wú)効になります。

アニメーションタイミング関數(shù)

機(jī)能:

この屬性は、アニメーションの速度モードを定義するために使用されます。つまり、このプロパティを使用して、アニメーションをゆっくりと開(kāi)始するか、一定の速度で実行するか、または速く実行するかを定義できます。

次の値があります:

• linear: アニメーションは一定の速度で実行されます。
• 緩和: ゆっくり始まり、途中で速く、ゆっくりと終わります。
• イーズイン: ゆっくりと始めます。
• イーズアウト: ゆっくりと終了します。
• イーズインアウト: ゆっくりとした開(kāi)始とゆっくりとした終了。
• cubic-bezier(x1, y1, x2, y2): カスタム速度モード。

例:

<code>.element {
  animation-name: fadeIn; /* 動(dòng)畫(huà)名稱或@keyframes */
  animation-duration: 2s; /* 動(dòng)畫(huà)持續(xù)時(shí)間 */
}</code>

アニメーション遅延

機(jī)能:

このプロパティは、アニメーションが開(kāi)始するまでに待機(jī)する時(shí)間、つまりアニメーションの遅延を定義します。

文法:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 動(dòng)畫(huà)名稱 */
   animation-duration: 2s; /* 動(dòng)畫(huà)持續(xù)時(shí)間 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可見(jiàn) */
   }
   to {
     opacity: 1; /* 可見(jiàn) */
   }
}</code>

例:

<code>animation-name: animationName;</code>

アニメーション反復(fù)回?cái)?shù)

機(jī)能:

この屬性は、アニメーションの繰り返し回?cái)?shù)、つまりアニメーションが何回繰り返されるかを定義するために使用されます。

次の値があります:

• 1: アニメーションは 1 回だけ実行されます (これがデフォルトです)。
• 無(wú)限: アニメーションは継続的に繰り返されます。
• 任意の回?cái)?shù): アニメーションは、定義した回?cái)?shù)だけ実行されます。

例:

<code>animation-name: fadeIn;</code>

アニメーションの方向

機(jī)能:

このプロパティはアニメーションの方向を定義します。

次の値があります:

• normal: アニメーションは順?lè)较颏藢g行されます (これがデフォルトです)。
• reverse: アニメーションは逆方向に実行されます。
• alternate: アニメーションは、前方に 1 回、後方に 1 回、交互に実行されます。
• alternate-reverse: アニメーションは最初に逆方向に実行され、次に順?lè)较颏藢g行されます。

例:

<code>animation-duration: time;</code>

アニメーションフィルモード

機(jī)能:

この屬性は、アニメーションの開(kāi)始前と終了後の要素のスタイルを定義するために使用されます。アニメーションが再生されていないときに要素にどのスタイルを適用するかを定義します。

アニメーションの前後で要素の外観を制御できるため、アニメーション中の要素の狀態(tài)をより柔軟に管理できます。

次の値があります:

• none: アニメーションの前後にスタイルは適用されません。
• forwards: アニメーションの終了スタイルを保持します。
• backwards: これにより、遅延時(shí)間內(nèi)でアニメーションの開(kāi)始スタイルも適用されます。
• both: 開(kāi)始スタイルと終了スタイルを処理します。

例:

<code>animation-duration: 4s; /* 動(dòng)畫(huà)將運(yùn)行4秒 */</code>

アニメーションの再生狀態(tài)

機(jī)能:

この屬性は、アニメーションの狀態(tài) (実行中または一時(shí)停止) を指定します。

次の値があります:

• 実行中: アニメーションは継続します。
• 一時(shí)停止: アニメーションは停止されますが、狀態(tài)は保持されます。

例:

<code>@keyframes animationName {
  from {
    /* 開(kāi)始樣式 */
  }
  to {
    /* 結(jié)束樣式 */
  }
}</code>

このプロパティは、ホバー時(shí)のアニメーションの一時(shí)停止など、インタラクティブなアニメーションに使用されます。

アニメーションの短縮構(gòu)文

アニメーションの短縮表現(xiàn)を使用すると、複數(shù)のアニメーション プロパティを 1 行で定義できます。各アニメーション プロパティを 1 つずつ記述する代わりに、これらを 1 行に結(jié)合して読みやすくすることができます。

文法:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可見(jiàn) */
  }
  to {
    opacity: 1; /* 可見(jiàn) */
  }
}</code>

例:

<code>.element {
  animation-name: fadeIn; /* 動(dòng)畫(huà)名稱或@keyframes */
  animation-duration: 2s; /* 動(dòng)畫(huà)持續(xù)時(shí)間 */
}</code>

こちら、

• スライド: アニメーションの名前。
• 3s: アニメーションの長(zhǎng)さは 3 秒です。
• イーズインアウト: 時(shí)間指定機(jī)能はイーズインアウトです。つまり、アニメーションはゆっくりと開(kāi)始され、速度が上がり、その後再び遅くなります。
• 1s: アニメーションは 1 秒遅れて開(kāi)始します。
• infinite: アニメーションは無(wú)限に繰り返されます。
• alternate: アニメーションは反復(fù)ごとに前方への移動(dòng)と後方への移動(dòng)を交互に行います。
• forwards: 最後のキーフレーム (100%) で適用されたスタイルは、アニメーションの完了後も保持されます。

アニメーションチートシート

私は、CSS アニメーションで使用されるすべての主要な概念、プロパティ、および構(gòu)文をカバーする包括的な CSS アニメーション チートシート を作成しました。

以下のリンクをクリックすると、GitHub でチートシートをダウンロードできます:

http://m.miracleart.cn/link/02f5df8adf0db026d38425594e68a007

それだけです。

お役に立てば幸いです。

読んでいただきありがとうございます。

私の記事が役立つと感じて、私の仕事をサポートしたい場(chǎng)合は、私にコーヒーを買(mǎi)うことを検討してください?。

このようなコンテンツをさらにご覧になりたい場(chǎng)合は、ここをクリックしてください。

X (Twitter) で私をフォローして、毎日の Web 開(kāi)発のヒントを入手してください。

コーディングを続けてください! ！

以上がCSS の基本的なアニメーション概念をマスターするの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。