イージングを「見比べる」
同じ距離を同じ時間で走るのに、見え方は全く違う。各ボールが描く「時間と速度の関係」を視覚化します。
linear
ease
ease-in
ease-out
ease-in-out
cubic (overshoot)
steps(8, end)
2.0s
各カーブのプロファイル
linear
ease
ease-in
ease-out
ease-in-out
overshoot
アニメーションビルダー
パラメータを動かして、CSSを生成。納得したらコピーしてそのまま使えます。
ベジエ曲線デザイナー
2つのハンドルをドラッグして、独自のイージング曲線を作ります。ボールがその時間配分で動きます。
cubic-bezier(0.34, 1.56, 0.64, 1.00)
プリセット:
純粋CSSだけの仕掛け
JSを1行も書かずに、CSSの :hover / :checked / :focus-within だけで作るインタラクション集。マウスを乗せたり、タップしたり。
1. ホバーで裏返る
カードにマウスを乗せると裏面が見える。
A
B
2. チェックボックスでアコーディオン
ラベルクリックで開閉。
これは :checked セレクタで開閉する純粋CSSアコーディオン。JS不要。
3. スライドトグル
OFF/ONの切替スイッチ。
4. いいねハート
クリックで色が変わって弾ける。
5. 検索バー展開
focus すると幅が広がる。
🔍
6. スポットライト
マウス位置に光が追従。
マウスを乗せて
7. ラジオでタブ
選んだタブの中身が表示。
タブAの内容です。
タブBの内容です。
タブCの内容です。
8. ホバー拡大
マウスオーバーでズームイン。
9. 3D傾き
perspectiveで奥行きを与える。
10. プログレス充填
マウスを乗せると進捗が進む。
11. メニュードロップ
ホバーで隠れたメニュー登場。
12. カラースワップ
filter で色相回転。
13. モーダル開閉
:checked で全画面モーダル。
純粋CSSのモーダル
これは input:checked 兄弟セレクタだけで実装されたモーダルです。閉じてみてください。
パーティクル広場
どこでも好きなところをクリックして、紙吹雪・きらめき・ハート・リングを発射。色も種類も自由に。
クリック or タップで発射 ✨
気分ミキサー
複数のアニメーションをチェックボックスでON/OFFして、組み合わせの妙を観察。
複数の animation プロパティをカンマで連結すると、効果が重ね合わさります。
クリックで発動
どのカードでも好きにクリックすると、その動きが一度だけ再生されます。同じ動きでも、何度見ても面白い。