CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでホバー効果の速度を設定する方法｜transition-durationの使い方を解説

CSSでホバー（マウスオーバー）時のアニメーション速度を設定するには、transition-duration プロパティを使用します。ホバー時のスタイル変更は :hover セレクターで指定します。

transition-durationと:hoverセレクターの役割

transition-durationプロパティは、要素のスタイルが変化する際にかかる時間を秒（s）またはミリ秒（ms）単位で指定できます。例えば「2s」と設定すれば、色や枠線などの変化が2秒かけて滑らかに遷移します。このプロパティを元の要素側に記述し、変化後のスタイルを :hover セレクターで定義することで、自然なホバーアニメーションが実現します。

実装サンプルコード

以下のコードでは、ボタンにカーソルを合わせると、背景色が黄色からオレンジへ、枠線が破線から実線へと、2秒かけてゆっくりと変化します。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn {
        background-color: yellow;
        color: black;
        text-align: center;
        font-size: 15px;
        padding: 20px;
        border-radius: 15px;
        border: 3px dashed blue;
        transition-duration: 2s;
      }
      .btn:hover {
        background-color: orange;
        color: black;
        border: 3px solid blue;
      }
    </style>
  </head>
  <body>
    <h2>実行結果</h2>
    <p>下のボタンにカーソルを合わせて動作を確認してください：</p>
    <button class = "btn">結果を表示</button>
  </body>
</html>

ポイント解説

  • transition-duration: 2s; — ホバー時の変化に2秒かける設定です。値を小さくすると素早く、大きくするとゆっくりと変化します。
  • .btn:hover — ボタンにマウスが乗ったときに適用されるスタイルを定義しています。
  • transition-durationは元のセレクター（.btn）側に記述するのがポイントです。これにより、カーソルが離れたときも同じ速度で元の状態へ戻ります。

より細かく制御したい場合は、transitionプロパティで対象プロパティやイージング（緩急）をまとめて指定することも可能です。ぜひ実際にコードを実行して、ホバー効果の速度の違いを確認してみてください。

  1. CSSでボタンホバー時にフェードイン効果を実装する方法

    CSSを使えば、ボタンにマウスカーソルを重ねた（ホバーした）ときに、ふんわりとフェードインするアニメーション効果を簡単に実装できます。JavaScriptは不要で、transitionプロパティと:hover疑似クラスを組み合わせるだけで実現できるのが魅力です。 実装例 以下のコードをそのままHTMLファイルとして保存し、ブラウザで開いてみてください。ボタンにカーソルを重ねると、半透明だったボタンが0.5秒かけて滑らかにフェードインします。 <!DOCTYPE html> <html> <head> <style> .btn { bac

  2. CSSでボタンの幅を設定する方法【widthプロパティの使い方を解説】

    CSSでボタンの幅を設定するには、widthプロパティを使用します。widthプロパティにピクセル（px）やパーセント（%）などの値を指定することで、ボタンの横幅を自由にコントロールできます。widthプロパティの基本的な使い方ボタンにクラスを割り当て、そのクラスに対してwidthプロパティを指定するのが一般的な方法です。以下のサンプルコードでは、幅120pxのボタンを作成しています。コード例以下のコードを実行して、ボタンの幅がどのように設定されるか確認してみましょう。<!DOCTYPE html> <html> <head> <st