CSS の基本的なアニメーション概念をマスターする

CSS アニメーション: ウェブサイトに活力と動きを与える魔法

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

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

始めましょう! ?

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

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

@keyframes

@keyframes はアニメーションのロードマップであり、アニメーションの開始点と終了点、およびその間のステップを定義します。

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

文法:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

例:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

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

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

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

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

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

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

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

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

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

文法:

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

例:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 动画名称 */
   animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可见 */
   }
   to {
     opacity: 1; /* 可见 */
   }
}</code>

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

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

• アニメーション名
• アニメーション期間
• アニメーションタイミング関数
• アニメーション遅延
• アニメーション反復回数
• アニメーションの方向
• アニメーションフィルモード
• アニメーションの再生状態

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

アニメーション名

機能:

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

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

文法:

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

例:

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

アニメーションを実行するには、animation-name 属性が必要です。

アニメーション期間

機能:

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

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

文法:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

例:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

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

アニメーションタイミング関数

機能:

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

次の値があります:

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

例:

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

アニメーション遅延

機能:

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

文法:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 动画名称 */
   animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可见 */
   }
   to {
     opacity: 1; /* 可见 */
   }
}</code>

例:

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

アニメーション反復回数

機能:

この属性は、アニメーションの繰り返し回数、つまりアニメーションが何回繰り返されるかを定義するために使用されます。

次の値があります:

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

例:

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

アニメーションの方向

機能:

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

次の値があります:

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

例:

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

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

機能:

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

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

次の値があります:

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

例:

<code>animation-duration: 4s; /* 动画将运行4秒 */</code>

アニメーションの再生状態

機能:

この属性は、アニメーションの状態 (実行中または一時停止) を指定します。

次の値があります:

• 実行中: アニメーションは継続します。
• 一時停止: アニメーションは停止されますが、状態は保持されます。

例:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

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

アニメーションの短縮構文

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

文法:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

例:

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

こちら、

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

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

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

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

https://www.php.cn/link/02f5df8adf0db026d38425594e68a007

それだけです。

お役に立てば幸いです。

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

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

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

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

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

以上がCSS の基本的なアニメーション概念をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。