webの動きがよくわかる実践的な動きサンプル徹底解説

2025 11/29

2025/11/29

はじめに

本ドキュメントは、Webサイトに動的な効果（アニメーション）を実装する方法とサンプルコードをわかりやすくまとめたものです。具体的には、CSSアニメーションの基本構造と実践的な例、動きの印象を左右するイージング関数の説明、そしてReactとFramer Motionを用いた応用的な実装例を取り扱います。

目的
– 実際に使えるコード例を通して、アニメーションの仕組みを理解していただくことです。たとえば、ボタンのホバーでフェードさせる方法や、要素をスライドインさせる方法を扱います。

対象読者
– HTML/CSSの基礎は知っているが、アニメーションはこれから学びたい方。
– JavaScriptやReactに触れたことがあり、より洗練された動きを付けたい方。

このドキュメントで学べること（例）
– CSSの基本構造（@keyframes、transition）とコピペで使えるサンプル
– イージングによる動きの違い（線形、イーズイン、イーズアウトなど）と視覚例
– React＋Framer Motionを使ったコンポーネント単位のアニメーション設計

読み方のアドバイス
– 第2章でまず手を動かし、第3章で動きの微調整を学びます。第4章では実運用に近い形で組み込み方を示します。

前提
– 例は主にモダンブラウザ向けです。必要に応じて互換性対応を追記してください。

以降の章で、コード例と図的な説明を交えて丁寧に解説します。ご自身のサイトに合う動きを見つけて、試してみてください。

CSSアニメーションの基本構造とサンプルコード

基本プロパティの説明

animation-name: アニメーションの識別名を指定します。例：fadeIn
animation-duration: 何秒で動くかを指定します。例：0.6s
animation-timing-function: 動きの速さの変化（イージング）を指定します。例：ease-out
animation-delay: 開始を遅らせます。例：0.2s
animation-iteration-count: 繰り返す回数。infiniteで無限ループです。
animation-direction: 正順・逆順を指定します。alternateで交互に動きます。
animation-fill-mode: アニメーション前後のスタイル保持を指定します。forwardsで終了状態を維持します。

サンプル（短めの実装例）

1) フェードイン

.fade-in{animation: fadeIn 0.6s ease-out forwards}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

2) スライドイン（左から）

.slide-in{animation: slideIn 0.6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes slideIn{from{transform:translateX(-20px);opacity:0}to{transform:none;opacity:1}}

3) ぽよよん（弾む）

.bounce{animation: bounce 0.8s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes bounce{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

4) スライド＋スキュー

.skew-slide{animation: skewSlide 0.7s ease forwards}
@keyframes skewSlide{from{transform:translateY(12px) skewX(-8deg);opacity:0}to{transform:none;opacity:1}}

5) ポップアップ（拡大＋フェード）

.pop{animation: pop 0.5s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

6) 背景アニメーション（左右移動）

.bg-move{background:linear-gradient(90deg,#eee,#ccc);background-size:200% 100%;animation:bgShift 6s linear infinite}
@keyframes bgShift{from{background-position:0 0}to{background-position:200% 0}}

7) マスク背景（横に開く）

.mask{overflow:hidden}
.mask .inner{animation:maskOpen .7s ease forwards}
@keyframes maskOpen{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}

8) フェードアップ（下→上にフェード）

.fade-up{animation:fadeUp .6s ease-out forwards}
@keyframes fadeUp{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

各例はdurationやtiming-function、fill-modeを調整すると印象が変わります。用途に合わせて値を変え、過度に長くならないよう控えめに使うと効果的です。

イージング関数の役割

イージングとは

アニメーションの速度変化を指定するのが、animation-timing-function（イージング）です。開始から終了までを均一に動かすか、途中で加速・減速をつけるかを決めます。動きの印象を大きく左右します。

主なキーワードと例

linear：速度が一定。移動が機械的に見える場合に使います。
ease：自然な加速と減速（ブラウザ既定）。
ease-in / ease-out / ease-in-out：始め/終わり/両方で変速します。

例：

button { transition: transform 300ms ease-out; }

短い操作ではease-outで終わりを強調すると心地よく感じます。

cubic-bezierで細かく調整

4つの数値で速度カーブを定義します。例えばcubic-bezier(0.25,0.1,0.25,1)はeaseと同等です。最初の2つが開始の傾き、後ろの2つが終了の傾きを表します。試しながら微調整すると自分のデザインに合う動きが作れます。

選び方のポイント

UIの応答（ボタンやメニュー）は短め（100–300ms）で鋭めのイージングを使います。
飾りアニメーションは長めで緩やかなカーブを選ぶと落ち着いた印象になります。
パフォーマンス面ではtransformとopacityを使うとスムーズに動きます。

各場面で意図を考え、イージングを調整すると使いやすく美しい動きが作れます。

ReactとFramer Motionを使った動的Webサイト制作

導入

ReactとFramer Motionを組み合わせると、直感的で滑らかなアニメーションを効率よく作れます。コンポーネント単位で制御するため、保守性が高くなります。

セットアップ

インストール: npm install framer-motion
インポート: import { motion } from ‘framer-motion’

基本実装フロー

初期状態(initial)を定義します。
最終状態(animate)を指定します。
transitionで持続時間やイージングを調整します。

簡単な例:

const Header = () => (
  <motion.header initial={{ y:-20, opacity:0 }} animate={{ y:0, opacity:1 }} transition={{ duration:0.6 }}>
    <h1>サイトタイトル</h1>
  </motion.header>
)

ランディングページのヘッダー例

ヘッダー内のロゴ、ナビ、CTAを順に見せたい場合、variantsとstaggerChildrenを使います。子要素にdelayを個別に書くより可読性が高くなります。

const container = { hidden:{}, show:{ transition:{ staggerChildren:0.12 } } }
const item = { hidden:{ y:10, opacity:0 }, show:{ y:0, opacity:1 } }

<motion.div variants={container} initial="hidden" animate="show">
  <motion.div variants={item}>Logo</motion.div>
  <motion.div variants={item}>Nav</motion.div>
  <motion.div variants={item}>CTA</motion.div>
</motion.div>