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

CSSトランジションとは？基本の使い方とサンプルコードをわかりやすく解説

CSSトランジションとは

CSSのtransition（トランジション）を使うと、要素のプロパティ値を簡単に、しかも滑らかに変化させることができます。色やサイズなどのスタイルが瞬時に切り替わるのではなく、一定の時間をかけてアニメーションのように変化するのが大きな特徴です。

また、transitionプロパティでは、変化にかかる時間（duration：継続時間）も自由に設定できます。「3秒かけてゆっくり変化させる」「0.5秒で素早く変化させる」など、演出のテンポを細かくコントロールできる点も魅力です。

要素の高さを変化させてみよう

それでは実際に、マウスカーソルを重ねたとき（hover時）にボックスの高さが変化するサンプルを作成してみましょう。

サンプルコード

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

この例では、div要素にtransition: height 3s;を指定しています。そのため、ボックスにカーソルを重ねると、高さが150pxから200pxへと3秒かけてなめらかに変化します。

このように、transitionプロパティは「どのプロパティを」「何秒かけて」変化させるかを一行で指定できる手軽な仕組みです。ボタンのホバー演出やメニューの開閉など、WebサイトのUX向上にも幅広く活用されています。

  1. CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

    CSSの疑似クラス（Pseudo Class）は、要素の特別な状態を表現するための仕組みです。ドキュメント内の要素そのものだけでなく、「状態」「位置」「履歴」などといった外的な要素も捉えることができます。たとえば「マウスカーソルが乗っている要素」「すでに訪問済みのリンク」「入力値が有効なフォームフィールド」といった状態は、通常のCSSセレクターでは直接指定できません。こうした場合でも、疑似クラスを使えば柔軟にスタイルを適用できます。疑似クラスの基本構文疑似クラスは、セレクターの後ろにコロン（:）を付けて記述します。Selector:pseudo-class {   &nbs

  2. CSSの疑似要素（Pseudo-element）とは？基本構文と実例付きでわかりやすく解説

    CSSの疑似要素（Pseudo-element）とは、要素の一部を指定してスタイルを適用するためのセレクターです。たとえば、テキストの最初の1文字や1行目など、通常のセレクターでは選択できない特定の部分をターゲットにできます。また、::before と ::after を使えば、要素の前後にコンテンツを挿入することも可能です。基本構文疑似要素は、セレクターに続けて「::」＋疑似要素名という形式で記述します。基本的な書き方は以下のとおりです。Selector::pseudo-element {    css-property: /*値*/; }サンプルコード①：カウンターを使