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

CSSトランジションの使い方を解説！transitionプロパティで滑らかなアニメーションを実装する方法

CSSトランジションとは

CSSトランジションを操作するには、transitionプロパティを使用します。このプロパティを活用することで、要素のスタイルが変化する際に、急な切り替えではなく滑らかなアニメーション効果を簡単に実装できます。

transitionプロパティでは、変化の対象となるCSSプロパティや、アニメーションの所要時間（duration）などを指定できます。JavaScriptを使わずCSSだけで動きを表現できるため、WebページのUX向上に役立つ便利な機能です。

CSSトランジションの実装例

以下のコードは、マウスホバー時にボックスの幅が滑らかに変化するトランジションを実装したサンプルです。実際にブラウザで実行して、動作を確認してみてください。

サンプルコード

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

コードの解説

この例では、div要素に対してtransition: width 4s;を指定しています。その結果、ボックスにマウスカーソルを合わせると（:hover状態）、幅が150pxから200pxへと4秒かけて滑らかに変化します。

transitionプロパティを指定しない場合は幅が瞬時に切り替わりますが、トランジションを設定することで、視覚的に自然で洗練されたアニメーション効果を得られます。durationの値を変更すれば、変化にかかる時間も自由に調整可能です。

  1. CSSだけでチェックマークを作成する方法【サンプルコード付き】

    CSSを使えば、画像ファイルやアイコンフォントに頼ることなく、独自デザインのチェックマークを作成できます。この記事では、::before／::after の疑似要素を活用する方法と、border＋transform を使うシンプルな方法の2つの実装例を、サンプルコードと実行結果あわせて紹介します。 方法1：疑似要素（::before / ::after）を使う方法 1つ目の例では、正方形のボックスに対して ::before と ::after の2つの疑似要素を配置し、それぞれを回転させることで、チェックマークを構成する「短い線」と「長い線」を描画しています。 <!DOCTYPE htm

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ