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

CSSのtransition-durationプロパティでトランジション効果の完了時間（秒・ミリ秒）を設定する方法

CSSでは、transition-durationプロパティを使用することで、トランジション（遷移）効果が完了するまでにかかる時間を秒（s）またはミリ秒（ms）単位で指定できます。アニメーションの速度感をコントロールするために欠かせないプロパティです。

基本構文

transition-duration: 時間;

値には「2s」（2秒）や「500ms」（0.5秒）のように時間を指定します。初期値は「0s」で、この場合は変化が即座に完了し、アニメーションは表示されません。また、カンマ区切りで複数の値を指定すれば、複数のプロパティごとに異なる時間を設定することも可能です。

使用例

以下の例では、ボックスにマウスカーソルを合わせると高さが変化します。transition-duration: 2s; の指定により、その変化が2秒かけて滑らかに実行されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 150px;
            background: blue;
            transition-property: height;
            transition-duration: 2s;
         }
         div:hover {
            height: 200px;
         }
      </style>
   </head>
   <body>
      <h1>見出し</h1>
      <p>下のボックスにマウスを乗せると、高さが変化します。</p>
      <div></div>
   </body>
</html>

コードのポイント

  • transition-property: height; — 高さの変化に対してトランジションを適用します。
  • transition-duration: 2s; — 変化が完了するまでの所要時間を2秒に設定します。
  • div:hover — マウスオーバー時の最終的な状態（height: 200px）を定義しています。

durationの値を短くすると素早い動きに、長くするとゆったりとした動きになります。UIの印象を大きく左右するため、目的に応じて適切な時間を設定しましょう。

  1. CSSを使ってユーザー評価スコアカードを作成する方法

    CSSとFont Awesomeのアイコンフォントを組み合わせれば、レビューサイトやECサイトでおなじみの「ユーザー評価」スコアカードを簡単に作成できます。平均評価を示す星アイコンと、各星の評価件数を視覚化したプログレスバー（進捗バー）を並べることで、訪問者にとって直感的に分かりやすい評価パネルを実現できます。 実装例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"

  2. CSSでウィンドウの高さ100%のDIVを作成する方法

    CSSのheightプロパティを使うと、要素の高さを自由に指定できます。ウィンドウ（ビューポート）の高さいっぱいに要素を表示したい場合は、heightプロパティとvh単位を組み合わせるのが一般的です。この記事では、ウィンドウの高さ100%のDIVを作成する具体的な方法を、サンプルコード付きでわかりやすく解説します。heightプロパティの構文CSSのheightプロパティは、次のように記述します。Selector {    height: /*値*/ }値にはpxや%などの絶対・相対単位を指定できます。親要素に対する割合（%）で高さを指定する場合、親要素にも明示的に高さが設