よく使う動き
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
CSSアニメーションライブラリ
「ふわっ」「パタッ」「くるっ」――このページは、Webでよく使う出現アニメーションを日本語のオノマトペで整理した、いわば動きの語彙集です。要素が現れるときの13種の基本動作に加えて、複数要素を順番に・ランダムに出現させる制御まで、CSSとJSの組み合わせで網羅しています。
アニメーションの引き出しは「種類を知っているか」より「名前で呼べるか」で差がつきます。チームやクライアントと「ここはふわっと」で通じる語彙を持っておくと、デザインの合意形成が一気に速くなります。
Animate.cssという様々な動きのパターンを集めたCSSライブラリを使って出現するスピードや形を調整し、オリジナルの動きをつくってみました！ Animate.css | A cross-browser library of CSS animations.
作ってみた１３種類のアニメーション
ふわっ
パタッ
くるっ
ボンッ
ヒュッ
じわっ
にゅーん
スーッ
シャッ
順番に現れる（CSS）
ランダムに現れる（CSS）
順番に現れる（CSS×JS）
ランダムに現れる（CSS×JS）
その他のCSSアニメーションライブラリ
上記で紹介したアニメーション（Animate.css）の他に、さまざまな動きをまとめたCSSアニメーションライブラリを５つご紹介します。
Vivify
CSS3で書かれた６０種類以上のアニメーションまとめたライブラリです。 Vivify – CSS Animation Library
ALL ANIMATION CSS3
CSS3で書かれた３０種類以上のアニメーションまとめたライブラリです。 ALL ANIMATION CSS3
WAIT! Animate
一定時間をおきながらアニメーションをループしたい時に直感的にコードを生成してくれるジェネレータです。 WAIT! Animate
CSS Animations Generator
動きを画面で確認して『Show CSSCode』ボタンを押すとコードを生成してくれるジェネレータ。 CSS Animations Generator
Animista
動きを画面内で生成し、右上にある『{・}』マークを押すとコードを生成してくれるジェネレータ。
Animista – CSS Animations on Demand
実務メモ（2026年追記）
ここにある動きはすべてtransformとopacityの組み合わせで、描画負荷の観点でも今なお正攻法です。実務で足すべきは2点だけ。発火のタイミングを IntersectionObserver で「画面に見えてから」にすること、そしてprefers-reduced-motionで動きを控える設定に応えること。この2点はどの動きにも共通の土台です。
- 1ページで使う動きは2〜3種類に統一する（種類が多いほど安っぽくなる）
- 出現時間は0.4〜0.8秒が目安。一覧ページでは短めに
- 順番に出す演出（stagger）は要素数が多いと待たされる。0.05〜0.1秒間隔で
- 見出し文字の演出はテキストの動き、画像カードは画像リンクの動きへ
次回の予定
ファーストビューにインパクトを持たせたい時、サイト全体の空気感を伝えたいときに活躍する「動く背景」に挑戦してみます ＼＼\٩( ‘ω’ )و //／／
