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

CSS transition-propertyでトランジション効果の対象プロパティを設定する方法

transition-propertyとは

トランジション効果の対象となるCSSプロパティの名前を設定するには、CSSのtransition-propertyを使用します。このプロパティを指定することで、どのCSSプロパティが変化したときにアニメーション（トランジション）効果を適用するかを制御できます。

transition-propertyに指定できる主な値

  • none：どのプロパティにもトランジション効果を適用しません。
  • all：変化するすべてのプロパティにトランジション効果を適用します（初期値）。
  • プロパティ名：widthやheightなど、特定のプロパティ名を個別に指定できます。複数指定する場合はカンマで区切ります。

使用例

以下の例では、transition-propertyに「width」を指定し、transition-durationで変化にかかる時間を3秒に設定しています。ボックスにマウスカーソルを合わせると、幅が滑らかに変化します。

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

動作のポイント

ボックス上にマウスカーソルを合わせると、widthが150pxから250pxへと3秒かけて滑らかに変化します。このように、transition-propertyで対象プロパティを絞り込むことで、必要な要素だけにアニメーション効果を適用でき、パフォーマンスの面でも効率的な実装が可能です。

  1. CSSでタブ文字の幅を設定する方法｜tab-sizeプロパティの使い方を解説

    CSSでタブ文字（タブキーで挿入される空白）の表示幅を変更したい場合は、tab-size プロパティを使用します。デフォルトではタブ幅は8文字分に設定されていますが、このプロパティを使うことで任意のスペース数に調整できます。tab-sizeプロパティの基本tab-sizeプロパティは、主に <pre> や <code> など、整形済みテキストを表示する要素に対して効果を発揮します。指定できる値は以下のとおりです。数値： タブ1つあたりの幅をスペースの文字数で指定します（例： tab-size: 12;）length値： pxやemなどの単位で幅を指定することも可能ですi

  2. CSSのgrid-templateプロパティの使い方を徹底解説！行・列・エリアの一括設定方法

    grid-templateプロパティとは CSSのgrid-templateプロパティは、グリッドレイアウトにおける行数・列数・各エリア（領域）をまとめて指定できるショートハンドプロパティです。個別にgrid-template-rowsやgrid-template-columnsを設定する代わりに、このプロパティひとつでグリッド構造全体を簡潔に定義できます。 グリッドテンプレートを設定する際は、行と列の数を指定し、あわせてグリッドレイアウト内のエリアも定義します。 grid-templateの構文 grid-templateプロパティの書式は以下のとおりです。 grid-template: