CSSの分割要素の上にマウスを移動して幅を徐々に変更するにはどうすればよいですか?

要素のスタイルを段階的に変更し、ユーザーの操作またはサイトでの滞在時間によって、あるスタイルから別のスタイルに移行したいときは常に必要です。アニメーションを使用すると、任意の期間にわたってさまざまなスタイルを変更できます。必要なアニメーション プロパティを見てみましょう。

• Keyframe- これは要素のアニメーションを指定するために使用されます。これには、要素のスタイルに発生する変更が含まれます。その後、要素は最初のスタイルから最後に言及されたスタイルに移動します。

• Animation-name -これは、アニメーションを追加するたびにルールを指定する必要がないように、アニメーションを参照するために使用されます。

• アニメーション期間 -これは、要素に適用されるアニメーションの期間を指定します。初期値は 0ms で、無制限に続行できます。

• Animation-iteration-count - これは、アニメーションが繰り返される回数を決定します。

• Animation Delay -アニメーションを一定期間遅延させる必要がある場合は、このプロパティを使用できます。

• アニメーション方向 -これは、アニメーションが順方向、逆方向、または 2 つの方向を交互に行う必要があるかどうかを指定します。

• アニメーション時間関数 -アニメーションの開始、中間、終了で異なる時間間隔を持たせる場合は、このプロパティを使用します。

これらすべての属性で構成される 「アニメーション」略語属性 を使用することもできます。すべての要素で機能しますが、継承することはできません。略語表記を使用する場合は、各値の解釈がその順序に応じて異なるため、値の順序が重要であることに注意することが重要です。

＃＃＃例＃＃＃

CSS でアニメーションを使用する例を以下に示します。

リーリー

CSS のアニメーションとは何かを理解したところで、div 要素をアニメーション化して幅を徐々に変更する方法について説明します。

遷移プロパティ

この問題を解決するには、transition 属性を使用します。この属性は、要素にトランジション効果を追加するために使用されます。これは、CSS で使用できる短縮プロパティです。

アニメーションが発生し、要素がある状態から別の状態に変化するときに発生する遷移を定義します。これはすべての要素に適用され、継承できません。

次のプロパティは、

省略された遷移プロパティ

を構成します。

• Transition-delay

  -このプロパティは、遷移プロパティを適用する前にブラウザーが待機する必要がある時間を指定します。初期値は 0 で、正の値を指定すると待ち時間が長くなり、負の値を指定すると遷移が速くなります。

• トランジション期間

  - これは、アニメーションが終了するまでのトランジション効果が表示される時間を設定します。このプロパティのデフォルト値は 0 であるため、デフォルトではアニメーションは非表示になります。

• Transition-property

  -トランジション効果が適用される要素を設定します。可能な値は 2 つあり、なしとすべてです。デフォルトでは、値は all に設定されているため、すべての要素にトランジション効果が適用されますが、none はそのトランジション効果を持つ要素がないことを意味します。

• Transition-timing-function

  − このプロパティは、開始、中間、終了の移行速度を制御するために使用されます。アニメーション。初期値はイーズに設定されていますが、CSSにはあらかじめ定義された時間関数が多数あります。

ホバー状態に遷移プロパティを設定すると、ホバー時またはアクティビティ擬似クラスを使用してアニメーションがトリガーされます。 JS を使用してクラスを動的に割り当て、それらを使用して遷移をトリガーすることもできます。

＃＃＃例＃＃＃

CSS での遷移属性の使用の簡単な例は次のとおりです。

リーリー

上記のプログラムを実行するとテキストが表示されますので、その上にマウスを置くとテキストのトランジション効果が確認できます。

トランジションを解決策として使用する

次に、当面の問題を解決するためにトランジションを使用する例を見ていきます。

リーリー

上記のプログラムの出力は、幅が 2 秒以内に 150px から 500px に徐々に変化する

div

ボックスです。

＃＃＃結論は＃＃＃

要約すると、CSS のホバー セレクターを使用してパーティション要素の幅を徐々に変更することは、追加のコードを必要とせずに微妙なアニメーション効果を追加する効率的な方法です。これは、Web ページでボタンやメニューなどのインタラクティブな要素を作成する場合に特に便利です。わずか数行のコードで、ページを目立たせる動的な効果を作成できます。

以上がCSSの分割要素の上にマウスを移動して幅を徐々に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。