CSSだけでできるアニメーション表現10選COLUMN
2026年8月
「サイトに動きをつけたい」と聞くと、JavaScriptのライブラリを思い浮かべる方が多いかもしれません。しかし現在のCSSは想像以上に高機能で、実務で求められる動きの多くはCSSだけで実装できます。CSSだけで済ませるメリットは、読み込みが軽いこと、保守が簡単なこと、そしてJavaScriptが無効な環境でも壊れないことです。ここでは、当オフィスが実案件でよく使う表現を10種類紹介します。
1. ふわっと登場するフェードイン
ページを開いた瞬間、見出しや画像が下からふわっと現れる定番の演出です。opacityとtransformをtransition/animationで変化させるだけで実装でき、ファーストビューの印象がぐっと柔らかくなります。派手さより「丁寧に作られている感じ」を出したいコーポレートサイトに向いています。
2. ホバーで色が流れるボタン
お問い合わせボタンなどに、マウスを乗せると背景色が左から右へ流れ込む演出。背景グラデーションの位置をずらすだけの単純な仕組みですが、クリックできる場所だと直感的に伝わるため、導線の分かりやすさに直結します。
3. 画像のズームイン
ギャラリーや商品一覧で、サムネイルにカーソルを合わせるとゆっくり拡大する表現です。要素をoverflow:hiddenで囲み、中の画像だけをscaleで拡大するのがポイント。写真が主役のサイトでは、この一手間だけで高級感が変わります。
4. スクロールで要素が現れる
ページを下に読み進めると、コンテンツが順番に現れる演出。以前はJavaScript必須でしたが、最近のブラウザではCSSのスクロール連動アニメーション(animation-timeline)だけで実現できるようになりました。まだ対応ブラウザに差があるため、非対応環境では最初から表示される「安全側に倒れる」設計にしておくのがコツです。
5. 読み込み中のスケルトン表示
コンテンツが読み込まれるまでの間、灰色の枠がしましまと光る「スケルトンスクリーン」。体感の待ち時間を減らす効果があり、大手サービスで広く採用されています。グラデーションを左右に動かすだけでCSSのみで作れます。
6. 数字のカウントアップ
「導入実績250社」のような数字が0から一気に増える演出は、実はCSSの@propertyという仕組みで数値そのものをアニメーションできます。実績や料金など、数字を印象づけたい箇所に効果的です。
7. 無限ループのロゴマーキー
取引先ロゴが横に流れ続ける帯。同じ内容を2セット並べて半分だけ移動させると、継ぎ目のない無限ループになります。信頼感の演出として鉄板の手法です。
8. アコーディオン(開閉するQ&A)
よくある質問の開閉は、HTML標準のdetailsタグやCSSグリッドの行の高さ変化(0fr→1fr)で、JavaScriptなしに滑らかに実装できます。中身の文章量が変わっても崩れないのが後者の利点です。
9. 追従するヘッダーとスクロールでの縮小
スクロールしてもナビゲーションが画面上部に残り、少し進むとコンパクトになる挙動。position:stickyとスクロール連動アニメーションの組み合わせで、これもCSSだけで完結します。
10. Before/After比較スライダー
リフォームやレタッチの実績紹介で使われる、境界線を動かして施工前後を見比べるUI。clip-pathで画像を切り抜き、つまみの位置と連動させます(つまみの操作のみ数行のJavaScriptを使うのが現実的です)。
実際に動くデモを500個公開しています
ここで紹介した表現を含む500種類のアニメーションを、コードをコピーしてすぐ使える形で公開しています。すべて無料・クレジット表記不要ですので、制作の引き出しとしてご活用ください。
Webサイト制作・デザインのご相談は
ウルスコネクトへお気軽にどうぞ。
©uls conect