Motion
// CSS ANIMATION SHOWCASE
Figmaの静止デザインも、CSSとわずかなJSがあれば「体験」に変わります。
ここではサイト制作で実際に使用している動きの実装をデモとして紹介します。
各カードは画面内に入ると自動で再生されます。
「再生」ボタンで動きを何度でも確認できます。
01 / FADE
DIV
下からふわっと浮かび上がるように出現。スクロールで最初に目に入る要素に多用します。
02 / FLIP
DIV
X軸方向にパタッと倒れ込むように出現。カード型UIのアクセントに使います。
03 / ROTATE
DIV
くるっと回転しながら定位置へ。アイコンやロゴの登場演出に効果的です。
04 / ZOOM
DIV
弾むように拡大して出現。バウンス系のイージングでポップな印象を作ります。
05 / TEXT REVEAL
1文字ずつ時間差で出現。見出しに動きを与えたいときの定番手法です。
06 / BG SWEEP
READY
背景色が左から伸びて画面を覆い、テキストが現れる演出。セクションの切り替わりに。