どうも！LSSです！！
昨日の記事、
【CSS】JavaScriptを使わない開閉メニュー【CSSのみで可能・はてなブログ記事で使用可能】
にいただいた、はてブコメントにて
「transitionを組み合わせれば滑らかに開閉する」
とありましたので、早速試してみました！
サンプル
こういう感じですね^^
コード
<style><!--
#menu{transform:scaleY(0);transform-origin:left top;transition:transform 0.4s linear 0s;}
#tg01:checked~#menu{transform:scaleY(1);}
--></style>
<div>
<label for="tg01">メニュー（クリックしてみてね）</label>
<input id="tg01" style="display: none;" type="checkbox" />
<div id="menu">ああああああ<br />ああああああ<br />ああああああ</div>
</div>
赤文字部分が変更点です。
閉じている時の状態を
transform:scaleY(0);
で「高さを0倍」にしており、開いた時の状態を
transform:scaleY(1);
で「高さを1倍」に戻しています。
transform-origin:left top;
が変化の起点を指定している部分で、topを指定する事で「上から大きくなる」ようにしています。
transition:transform 0.4s linear 0s;
この部分が今回のメイン「transition」。
transitionは「変化を、時間をかけて、アニメーションさせる」事ができます^^
今回の指定は、
「transformについての指定を、0.4s（0.4秒）かけて、linear（直線的な）速度で、0s（0秒）後に変化させ始める」
という内容になります。
linearの部分に指定するのは他に、
ease 最初はややゆっくり、途中速くなり、最後はゆっくり
ease-in 徐々に速くなる
ease-out 徐々に遅くなる
ease-in-out 最初と最後はゆっくり
という候補があります。
速度の違いを試してみます
以下、速度変化の部分を変更したサンプルを並べてみました！
0.4sではよく分からなかったので、全て2sにしています。
いかがでしたでしょうか？
今ひとつ分かりづらいですが、自分の好みで言ったらeaseが好きかもです！^^
CSSは他にも色々な事ができるようです^^
傾けるとか
色々試していきたいですね^^
コメントくださった方、ありがとうございました！
てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
