CSSアニメーション

コピペで動く CSS/SCSS アニメーション、テーマごとに9種

マイクロインタラクション CSS 9選 — 一行でコピペOK

マイクロインタラクション css は、ボタンを押す・保存する・タブを切り替える一つの操作に、画面がひと呼吸だけ反応して見せる小さなアニメーションです。この記事では9種類を選び、transitionと@keyframesだけで実装しました。グ

読む

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

css ローディングスピナーは、読み込み中であることをひと目で伝える、CSSだけで動く小さな部品です。この記事では9種類を選び、疑似要素とtransform、そして@propertyという仕組みだけで実装しました。格子の9つはiframe

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

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

css ダークモード切り替えは、ページの配色を light と dark で入れ替えるトグルの動きを CSS だけで作る手法です。この記事では9種類を選び、アイコンの回転から light-dark() 関数まで、実装ごとにコードをそろえ

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

css スケルトンとは、本物のコンテンツが届く前に画面の形だけを灰色の板で先に見せておくローディング表現のことです。この記事ではシマーライン・カード・表・コンテナクエリまで9種類を選び、JavaScript を使わず SCSS だけで実装し

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

スクロールアニメーション css は、要素が画面に入った量やページ全体の読了率を animation-timeline に渡し、JavaScript を1行も書かずに動かす仕組みです。この記事では9種類を選び、view() と scrol