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

CSSでwidthとheightの両方にトランジション効果を追加する方法

要素のwidth・height両方にCSSトランジション効果を適用する

Webページ上の要素のサイズを滑らかに変化させたい場合は、CSSのtransition（トランジション）プロパティを使用します。width（幅）とheight（高さ）の両方に遷移効果を追加するには、transitionプロパティにカンマ区切りで対象のプロパティと変化にかかる時間を指定します。

基本的な書き方

transition: width 3s, height 3s;

このように記述すると、幅と高さがそれぞれ3秒かけて滑らかに変化します。すべてのプロパティをまとめて対象にしたい場合は、transition: all 3s; のように「all」を指定することも可能です。

実装例

以下は、ボックスにマウスカーソルを合わせると、幅と高さが同時に拡大するサンプルコードです。

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

動作のポイント

  • transitionは元の状態側に記述する：divセレクター側に指定することで、hoverが解除されたときもスムーズに元のサイズへ戻ります。
  • :hoverで変化後の値を定義する：マウスオーバー時にwidthとheightが150pxから250pxへ変化します。
  • 時間の単位は秒（s）またはミリ秒（ms）：「3s」なら3秒かけてゆっくりと変化します。より短い時間にすれば素早いアニメーションになります。

  1. CSSのmarginプロパティを使った要素の中央揃え方法を徹底解説

    CSSのmarginプロパティを使用すると、ブロックレベル要素を水平方向に中央揃えできます。ただし、中央揃えを機能させるには、対象要素のwidthプロパティで幅を設定しておく必要があります。それでは、CSSのmarginプロパティを使って要素を中央揃えする具体的な例を見ていきましょう。marginのauto値で中央揃えが機能する仕組みmargin: 10px auto;のように左右のマージンにautoを指定すると、利用可能な余白が左右に均等に分配され、要素が親要素の中央に配置されます。このテクニックが有効なのは、要素に明示的な幅が指定されている場合のみです。幅が未指定のブロックレベル要素は、デ

  2. CSSで要素の幅と高さを指定する方法！height・widthプロパティの基本と実例

    CSSの height プロパティと width プロパティは、それぞれ要素の高さと幅を指定するために使用されます。また、max-height、max-width、min-height、min-width プロパティを使えば、これらのサイズに上限値や下限値を設定することも可能です。 基本構文 CSSの height および width プロパティの基本的な書き方は以下の通りです。 Selector {    height: /*値*/    width: /*値*/ } 要素の実際のサイズの計算方法 要素の実際の表示サイズは、width や height