トランジション

現れて消えて変わる瞬間

CSS ドロップダウンメニューアニメーション 9選 — JS最小・CSSだけ

css ドロップダウンメニューは、クリックやホバーで隠れていた選択肢を高さや透明度の変化で見せる、CSSだけで動くナビゲーション部品です。この記事では9種類を選び、grid-template-rows・clip-path・popover属

読む

css アコーディオンアニメーションは、クリックした項目だけが高さごと開閉するUI部品を、JavaScriptなしでCSSだけで動かす技術です。この記事では9種類を選び、interpolate-size と calc-size() とい

css ハンバーガーメニューアニメーションは、3本線のアイコンをクリックした瞬間に何が起こるかを決める短い動きです。この記事では9種類を選び、CSS の transform と opacity だけで実装しました（JS はクリックを受け

css ページ遷移アニメーションは、2枚の画面要素を opacity や transform、clip-path だけで重ねて、ライブラリなしにページ間の切り替えを表現する手法です。この記事では9種類を選び、グリッドではそれぞれ2秒ごとに

css モーダルは、ボタンを押した瞬間に画面の上に浮かぶ確認・選択用の小さなパネルのことで、CSS だけで開閉のアニメーションまで作れます。この記事では9種類を選び、下のグリッドは2秒ごとに自動で開閉するので、クリックはできず眺めるだけにな