DOMのアニメーション実装方法

例えばwebでmodalをふわっと出したいなどDOMに動きを付ける場合に透明度やウインドウサイズの数字を変化させるときに何個かやり方があり、
・CSS Transition
・Animation @keyframes
・GSAPを使ってjavascript実装
の3パターンを気分によって使っているが、今日方針をはっきりさせました

CSS Transition

デフォルトの表示状態Aとイベント発生後の状態Bを持てる
単純なA→Bのアニメーションに有効

classが変化(:hoverなどのマウスアクションや、javascriptによるclassの付与）しないと動かない。近年ではvueやreactで部分的なDOMのロードも気軽にできるがそれをトリガーとしたいときに相性が悪いのでこちらは使わない。
:hoverやイベント制御にjavascriptをすでに使っている場合はclassを付与すれば動くのでそういう場面で使う。

Animation @Keyframes

DOMのロードをトリガーにアニメーションしたい場合はclassの追加付与がいらないこちらがいいと思う。フレームをfrom toだけでなく%刻みで複数設定ができたりするので、A→BだけでなくA→B→C→Dのように動かしたいときもこちらをつかう

.modal{
   animation-name: fadein;
   animation-duration: 0.1s;
}
@keyframes fadein {
 from {
   transform: scale(0.9);
   opacity: 0.8;
 }
 to {
   transform: scale(1);
   opacity: 1;
 }
}

GSAP

透明度やサイズ、角度の変更などの見た目のアニメーションにとどまらず、DOMの位置も制御する場合にはこれを使う。
三角比を使って楕円形の回転運動させたりできるよ