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

CSSのtransition-durationプロパティでトランジションの時間を指定する方法

CSSのtransition-durationプロパティは、要素が変化するときのトランジション（遷移）にかかる時間を指定するために使用します。値は秒（s）またはミリ秒（ms）で表し、例えば「2s」と指定すれば、変化が2秒かけて滑らかに完了します。

transition-durationの基本

このプロパティは通常、transition-propertyと組み合わせて使います。transition-propertyでどのCSSプロパティをアニメーションさせるかを決め、transition-durationでその変化にかかる時間を決定します。

  • 初期値：0s（指定しない場合、変化は瞬時に完了します）
  • 指定可能な値：秒単位（s）またはミリ秒単位（ms）
  • 複数の値：カンマ区切りで複数のプロパティごとに異なる時間を指定することも可能です

コード例

以下の例では、青いボックスにマウスカーソルを合わせると、高さが150pxから200pxへと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>

ポイント解説

上記のコードでは、div要素に対してtransition-property: height;で高さの変化をアニメーション対象とし、transition-duration: 2s;でその変化に2秒かけるよう設定しています。さらに:hover疑似クラスによって、マウスオーバー時の高さを200pxに変更しています。

より短いコードで書きたい場合は、一括指定できるtransitionショートハンドプロパティを使うのも便利です。例えばtransition: height 2s;のように1行でまとめられます。

  1. CSSでheight（高さ）プロパティをアニメーションさせる方法

    CSSで要素のheight（高さ）プロパティをアニメーションさせたい場合は、@keyframesルールとanimationプロパティを組み合わせて使います。以下のサンプルコードを実行すると、div要素の高さが一定間隔で滑らかに変化するアニメーションを確認できます。 サンプルコード <!DOCTYPE html> <html>   <head>     <style>       div {    &

  2. CSSのisolationプロパティとは？使い方とスタッキングコンテキストの分離方法

    CSSのisolationプロパティは、要素が新しいスタッキングコンテキスト（stacking context）を作成する必要があるかどうかを定義するためのプロパティです。特にmix-blend-modeなどを使ったブレンドモードの適用範囲を制御したい場合に活用できます。構文isolation: auto | isolate | initial | inherit;各値の意味auto：デフォルト値です。通常、新しいスタッキングコンテキストは作成されません。isolate：要素に対して強制的に新しいスタッキングコンテキストを作成します。ブレンドモードの影響範囲をこの要素内に限定できます。init