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

CSSのtransitionプロパティとは？4つのトランジション設定を1行でまとめる方法

CSSのtransition（トランジション）プロパティを使うと、transition-property、transition-duration、transition-timing-function、transition-delay の4つのプロパティを、たった1行にまとめて指定することができます。

個別に記述するよりもコードがすっきりし、可読性も向上するため、実際の開発ではこの省略形（ショートハンド）が広く使われています。

transitionプロパティの基本構文

transition: プロパティ名 持続時間 タイミング関数 遅延時間;
  • transition-property: 変化を適用するCSSプロパティ（例：width、height）
  • transition-duration: アニメーションの完了までの時間（例：3s）
  • transition-timing-function: 変化の速度カーブ（例：ease、linear）※省略可能
  • transition-delay: アニメーション開始までの遅延時間 ※省略可能

実装例

以下のコードでは、ボックスにマウスカーソルを合わせると、高さが3秒かけて滑らかに変化します。

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

コードの解説

この例では transition: height 3s; と指定することで、「heightプロパティが3秒かけて変化する」というアニメーションを定義しています。:hover 疑似クラスによって高さが150pxから250pxへ変わる際、急に切り替わるのではなく、なめらかなトランジション効果が適用されます。

複数のプロパティに同時にトランジションを適用したい場合は、カンマ区切りで次のように指定できます。

transition: height 3s ease, width 2s linear 0.5s;
  1. CSSのfont-kerningプロパティで文字詰め（カーニング）を制御する方法

    Webページ上に配置された文字同士の間隔を調整するには、font-kerningプロパティを使用します。カーニングとは、特定の文字の組み合わせ（例えば「AV」や「To」など）において、文字間隔を自動的に詰めて見た目のバランスを整えるタイポグラフィの手法です。font-kerningプロパティの主な値auto：ブラウザがカーニングの適用可否を自動的に判断します（初期値）。normal：フォントに含まれるカーニング情報に基づいて、文字詰めを適用します。none：カーニングを無効にし、文字を等間隔で配置します。使用例以下のコードを実行して、font-kerningプロパティの動作を確認できます。&l

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

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