この記事の要点

transition: transition: all 0.3s ease; でホバー等の状態変化を滑らかに @keyframes + animation: より複雑な多段階アニメーション、ループ可 transform: translate() / rotate() / scale() / skew()。GPU 加速で 60fps will-change で事前にレイヤー化 → カクつき軽減（乱用厳禁） prefers-reduced-motion でアクセシビリティ対応（前庭機能障害ユーザ向け） JS で柔軟に: Web Animations API / GSAP / Lottie

transition: もっとも手軽なアニメーション

状態が変化する 2 点間を補間します。hover / focus / class 切替と相性抜群。

.btn {
    background: #1976d2;
    color: white;
    transform: scale(1);
    transition: all 0.3s ease;
    /* 全プロパティを 0.3 秒 ease で */
}

.btn:hover {
    background: #1565c0;
    transform: scale(1.05);
}

/* 個別指定（パフォーマンス的に推奨） */
.card {
    transition: transform 0.4s ease-out,
                box-shadow 0.4s ease-out;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

transition のプロパティ詳細

プロパティ	説明	例
transition-property	対象プロパティ	transform, opacity, all
transition-duration	所要時間	0.3s, 300ms
transition-timing-function	イージング	ease / linear / cubic-bezier(.25,.1,.25,1)
transition-delay	開始遅延	0.1s

@keyframes: 多段階アニメーション

0% ～ 100% の任意の地点で状態を指定できます。ループ・往復・無限もこちら。

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-20px); }
}

.ball {
    animation: bounce 1s ease-in-out infinite;
}

/* 多段階 */
@keyframes loader {
    0%   { transform: rotate(0deg);   opacity: 0.3; }
    50%  { transform: rotate(180deg); opacity: 1;   }
    100% { transform: rotate(360deg); opacity: 0.3; }
}

.spinner {
    animation: loader 1.5s linear infinite;
}

animation プロパティ

プロパティ	説明	例
animation-name	@keyframes 名	bounce
animation-duration	1 サイクルの時間	2s
animation-timing-function	イージング	ease-in-out
animation-delay	開始遅延	0.5s
animation-iteration-count	回数	3 / infinite
animation-direction	方向	normal / reverse / alternate
animation-fill-mode	終了後の保持	forwards / backwards / both
animation-play-state	再生/停止	running / paused

transform: GPU 加速で 60fps

top / left で動かすとレイアウト再計算（reflow）が発生し重い。transform なら GPU 合成のみで高速。

.slide {
    /* ❌ 重い: 親要素まで reflow */
    /* left: 100px; */

    /* ✅ 軽い: GPU 合成のみ */
    transform: translateX(100px);
}

/* 各 transform 関数 */
.box {
    transform: translate(50px, 20px);   /* 平行移動 */
    transform: rotate(45deg);            /* 回転 */
    transform: scale(1.5);               /* 拡大 */
    transform: skew(10deg, 0);           /* 斜め */

    /* 組み合わせ（順序重要） */
    transform: translate(50px, 0) rotate(45deg) scale(1.2);
}

/* 3D transform */
.card {
    transform: rotateY(180deg) translateZ(10px);
    transform-style: preserve-3d;
    perspective: 1000px;
}

will-change でパフォーマンス最適化

ブラウザに「この要素は動きます」と事前通知し、レイヤー化を促します。乱用するとメモリ消費が増えるので必要箇所のみ。

.modal {
    will-change: transform, opacity;
    /* ブラウザがあらかじめ GPU レイヤーに */
}

/* アニメ完了後は外す */
.modal.done {
    will-change: auto;
}

/* または、ホバー時だけセット */
.btn:hover {
    will-change: transform;
}

prefers-reduced-motion: アクセシビリティ対応

OS 設定で「動きを減らす」を選んでいるユーザ（前庭機能障害 / 乗り物酔いしやすい人）にはアニメを抑制すべきです。

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        animation: none;
        /* または短く */
        animation-duration: 0.01ms !important;
    }

    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

JavaScript で柔軟に: Web Animations API

CSS では難しい「動的な値」「複数要素の連動」を実装できる現代 JS の API。

// 単純なフェードイン
const el = document.querySelector('.box');
el.animate(
    [
        { opacity: 0, transform: 'translateY(20px)' },
        { opacity: 1, transform: 'translateY(0)' }
    ],
    {
        duration: 500,
        easing: 'ease-out',
        fill: 'forwards'
    }
);

// 複数キーフレーム + ループ
const anim = el.animate(
    [
        { transform: 'rotate(0)'   },
        { transform: 'rotate(180deg)' },
        { transform: 'rotate(360deg)' }
    ],
    { duration: 2000, iterations: Infinity }
);

// 制御
anim.pause();
anim.play();
anim.cancel();
anim.onfinish = () => console.log('done');

外部ライブラリ

ライブラリ	得意分野	備考
GSAP	複雑なタイムライン、SVG モーフ	商用も無料、業界標準
Lottie	After Effects → JSON → Web	デザイナーとの連携◎
Framer Motion	React コンポーネント単位	React 専用
anime.js	軽量 (14KB)、SVG/DOM/CSS 全対応	シンプル API

パフォーマンスのコツ

• 動かすのは transform と opacity だけ（GPU 合成可）
• width / height / top / left は避ける（reflow が発生）
• DevTools → Performance でフレームレート測定（目標 60fps）
• 巨大要素や大量要素の同時アニメは避ける
• モバイルで重ければ animation: none に

FAQ

Q: transition と animation の使い分け
A: 状態変化（hover / class 切替）は transition、ロード時・無限ループ・多段階は animation。

Q: アニメが途中で止まる / カクつく
A: transform/opacity 以外を動かしている可能性。DevTools Performance で確認、will-change も検討。

Q: スクロール連動アニメは？
A: 新 CSS の Scroll-driven Animations（animation-timeline: scroll()）が Chrome 115+ で利用可。古いブラウザ向けは IntersectionObserver + class 付与。