CSS Transitionが普及してアニメーションが低負荷に行えるようになりましたが、JavaScriptと組み合わせることも可能です。

Transitionの仕組み

MDNの、いかにも翻訳な文章からの引用ですが、

CSS3 仕様の一部である CSS transitions は、CSS プロパティが変化する際のアニメーションスピードの操作法を提供します。アニメーションによる変化は即座に反映されるのではなく、指定された時間の間に渡ってプロパティが変化します。例えば、ある要素の前景色を白色から黒色に変更する場合、通常は即座に前景色が替わります。transitions が有効な CSS では、指定した時間をかけて、またカスタマイズした加速度曲線に従って変化していきます。

つまり、「CSSプロパティ」の変化に対して、その場で変化するのでなくアニメーションで緩やかに変化させる、という仕組みです。これは変更の方法を問うものではないので、クラスの切り替えや:hoverなどの変化だけでなく、JavaScriptでCSSの値を直接変化させた場合にも、Transitionは発生します。

活用例

もちろん、定型的なものであれば、CSSで書いてしまって、JavaScriptではクラスを付け外しするだけにするほうが楽なのは間違いないです。ただ、transitionさせる値としてautoは使えないので、中身の分量が変動するようなボックスをtransitionさせたい場合、JavaScriptで高さを割り出して、それを明示的に指定することで、きれいにtransitionさせることができます。