CSS height 0 から auto で transition を有効にする方法

CSS で height 0 から auto で transition を有効にする方法を紹介します。
例えば、height 指定 0 から hover 演出を有効にしたい時に便利な方法です。

max-height を指定する

height:auto; の指定では transition が効かないため、max-height を指定することで transition を有効化します。

div a {

  max-height: 0;

  transition: max-height .4s ease;

}

div:hover a {

  max-height: 100px; // 高さの数値は適宜変更してください

}

まとめ

CSS で height 0 から auto で transition を有効にする方法を紹介しました。