CSS で高さを遷移させる

1. CSS で高さを遷移させるには transition プロパティと max-height、overflow プロパティを使用する
2. CSS のトランジションハイトに transition で transform プロパティを使用する

この記事では、CSS の要素の高さに遷移を適用するためのいくつかの方法を紹介します。

CSS で高さを遷移させるには transition プロパティと max-height、overflow プロパティを使用する

遷移は、特定の期間にわたってプロパティ値をスムーズに変更するために広く使用されているプロパティです。トランジションはアニメーションという名前にすることもできます。

トランジションには、transition-property、transition-duration、transition-timing-function、transition-delay などの特定のプロパティがあります。transition-property は、遷移効果を使用して変更される CSS プロパティを定義します。

transition-duration は、遷移を完了するのにかかる時間、つまり秒単位の時間を定義します。transition-timing-function は、遷移がどのように発生するか、つまり、遷移にどのような影響が与えられるかを定義します。

transition-timing-function には、ease、ease-in、ease-out、linear、ease-in-out などがあります。transition-delay プロパティは、時間を指定します移行を開始するのにかかるはずです。

これらのプロパティを組み合わせて、次のように遷移の省略形プロパティを使用できます。

transition: height 2s linear 1s;

ここで、height は transition-property を示し、2s は transition-duration を定義し、linear は transition-timing-function を指定し、1s は transition-delay を定義します。

transition を max-height プロパティとともに使用して、要素の高さを 0 から auto に設定できます。テキストにカーソルを合わせると、特定の HTML 要素の高さを変更できます。

max-height が 0 に設定されている場合、overflow:hidden プロパティを使用して、オーバーフローしたアイテムを非表示にすることができます。

たとえば、div を作成し、それに main の ID を指定します。その div の中に、段落タグ p を作成し、Hover Me と書きます。

次に、ul タグを使用して順序付けされていないリストを作成し、それに items の ID を付けます。li タグを使用して、ul 内にいくつかのリストアイテムを作成します。

CSS で、itemsid を選択し、max-height を 0 に設定します。ul 内のアイテムが表示されないようにします。

次に、background プロパティを gray に設定します。overflow プロパティを hidden に設定します。

max-height が 0 の場合、オーバーフローした ul アイテムを非表示にします。その後、transition プロパティを max-height 0.15s ease-out に設定します。

マウスカーソルをホバーアウトしている間、リストアイテムにイーズアウト効果が与えられます。

:hover セレクターを使用して mainid を選択し、続いて itemsid を選択します。次に、max-height の値を 500px に設定します。

その結果、画面サイズが 500px 未満の場合、ul アイテムに応じて高さが自動的に調整されます。次に、transition プロパティを transition: max-height 0.25s ease-in; として設定します。

これにより、ul の高さが自動に設定され、0.25 秒以内にイーズイン効果が得られます。

次の例は、効果のあるテキストにカーソルを合わせているときに、順序付けされていないリストが表示されることを示しています。また、テキストからカーソルを合わせると、順序付けされていないリストがフェードアウトします。

<div id="main">
 <p>Hover Me</p>
 <ul id="items">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 </ul>
 </div>

#main #items {
 max-height: 0;
 transition: max-height 0.15s ease-out;
 overflow: hidden;
 background: gray;
}
#main:hover #items {
 max-height: 500px;
 transition: max-height 0.25s ease-in;
}

CSS のトランジションハイトに transition で transform プロパティを使用する

transform プロパティは、要素の 2D または 3D 変換に使用されます。このプロパティには、rotate、scale、skew、move、translate などの値を指定できます。

このチュートリアルでは、スケールを使用して要素の高さを変更します。また、transition プロパティを使用して、高さの変更が発生している間にアニメーションを作成します。

scale プロパティは、要素のサイズを変更するために使用されます。scaleX を使用して X 軸で scale を使用し、scaleY を使用して Y 軸でスケールを使用できます。

ここでは、scaleY を使用して要素の高さのサイズを変更します。これは垂直方向（Y 軸に沿って）に行う必要があります。値 scaleY(1) は要素の高さが 100％であることを示し、値 scaleY(0) は要素の高さが 0％であることを示します。

transform-origin というプロパティがあります。その値は、変換をどこから開始するかを示します。

高さを 0 から auto に増やして高さを上から下に拡張したいので、transform-origin の値を top に設定できます。要素にカーソルを合わせると、transform の値を scaleY(1) に設定して、その高さを auto に設定できます。

デモンストレーションの最初の方法で使用したものと同じ HTML テンプレートを使用します。

たとえば、#main #items となるような itemsID を選択し、スタイルを適用します。background-color を gray に設定します。

次に、transform プロパティを scaleY(0) に設定します。これにより、要素の高さが 0 に設定されます。

次に、変換を上から下に開始するため、transform-origin プロパティを top に設定します。次に、transition プロパティにスタイル transform0.3seasy を適用します。

ここで、transform は、ホバー中にアニメーションを発生させるプロパティを示します。0.3 は、アニメーションを完了するのにかかる時間を示します。

ease は transition-timing-function を示します。これは、アニメーションが発生する必要があることを意味します。最後に、: hover セレクターを使用して、transform プロパティを scaleY(1) に設定します。

div にカーソルを合わせると、変換の値が scaleY(0) から scaleY(1) に変わると、ul の高さが増加します。

サンプルコード：

<div id="main">
 <p>Hover Me</p>
 <ul id="items">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 </ul>
 </div>

#main #items {
 background-color: gray;
 transform: scaleY(0);
 transform-origin: top;
 transition: transform 0.3s ease;
}
#main:hover #items {
 transform: scaleY(1);
}