アニメーション参考集

用語集

アニメーション指示でよく使う言葉をまとめました。
この用語で伝えると、実装イメージのすれ違いを減らせます。

フェードイン（fade-in）

透明な状態から徐々に現れる、いちばん基本の出現演出。見出しやセクション全体の表示に。

スライドイン（slide-in）

少しずれた位置から本来の位置へ移動しながら現れる。「下から」「左から」など方向を指定できる。画像・カードの登場に。

スタッガー（stagger）

複数の要素を少しずつ時間差でずらしながら順番に再生。カードやリストの登場に多用。

ディレイ（delay）

アニメが始まるまでの待ち時間（例: 0.3 秒遅れて始まる）。

デュレーション（duration）

アニメの実行時間（例: 0.8 秒かけて動く）。長いほどゆっくり。

イージング（easing）

動きの速さの変化のつけ方。ease-out は最後がゆっくり（自然な着地感）、ease-in は最初がゆっくり。迷ったら ease-out が無難。

バウンス（bounce）

動きの最後にボールのように数回はねてから止まるイージング。落下・着地の質感。GSAP は ease: "bounce.out"。

バック（back）

動きの最後に一度行き過ぎてから戻るイージング。勢いのある登場・強調に。GSAP は ease: "back.out(1.7)"。

スクロール発火

「発火」はアニメが始まるきっかけのこと。スクロール発火は、要素が画面内に入った瞬間に再生が始まる（ScrollTrigger / IntersectionObserver を使用）。

ホバー発火

マウスを乗せた時に再生。ボタン・カードの装飾に多用。

ループ（loop）

同じアニメを繰り返し再生し続ける（背景演出・ローディング等）。

マスク（mask）

帯や図形が通過するようにコンテンツが現れる演出。左→右、下→上 など方向指定。

クロスフェード（cross-fade）

片方が薄れて消えながら、もう片方が現れて入れ替わる切り替え演出。スライダー・背景切替の定番。

パララックス（parallax）

スクロールに合わせて背景と前景が別々の速さで動き、奥行きを感じさせる演出。

スクラブ（scrub）

スクロールの量とアニメの進み具合を直結させる仕組み。スクロールを止めるとアニメも途中で止まり、逆にスクロールすると逆再生される。ScrollTrigger の scrub: true。

タイプライター（typewriter）

文字が 1 文字ずつ順に現れる。タイピング風の見出し演出。

グリッチ（glitch）

映像が一瞬乱れるようなデジタルノイズ演出。RGB ずれや揺れを伴う。

GSAP

JS でアニメを制御する定番ライブラリ（GreenSock Animation Platform）。CSS だけでは難しい複雑な連動・タイムライン制御が得意。

タイムライン（timeline）

複数のアニメを時系列に並べて連続再生させる仕組み。GSAP の gsap.timeline() が代表。

ScrollTrigger（スクロールトリガー）

GSAP のプラグイン。「画面のどの位置からどの位置までの間で動かすか」を指定して、スクロールとアニメを連動できる。

IntersectionObserver

要素が画面内に入ったかを検知するブラウザ標準機能。GSAP を使わない軽めのスクロール発火に多用。

モーションリダクション（prefers-reduced-motion）

OS の「アニメーションを控えめにする」設定を選んだユーザー向けに、アニメを減らす・止める配慮。@media (prefers-reduced-motion: reduce) { ... } で切替。

キーフレームアニメーション（@keyframes）

CSS だけで作るアニメの仕組み。「最初はこの状態 → 最後はこの状態」のように動きの節目（キーフレーム）を定義しておき、animation プロパティで再生する。
ループ・往復・回転などの多くの演出を、GSAP 等のライブラリ無しで作れる。

基本の書き方

/* 1. 動きを定義する（名前は自由。ここでは fadeIn） */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); } /* 開始: 透明で 20px 下 */
  to   { opacity: 1; transform: translateY(0); }    /* 終了: 表示され本来の位置 */
}

/* 2. 動かしたい要素で再生する */
.el {
  animation-name: fadeIn;              /* 使う動きの名前 */
  animation-duration: 0.8s;            /* 0.8 秒かけて */
  animation-timing-function: ease-out; /* 最後はゆっくり */
  animation-fill-mode: both;           /* 再生前後の状態を保持 */
}

各プロパティと指定できる値

animation-name ── 動きの名前

@keyframes で定義した名前を指定して呼び出す。

animation-duration ── 実行時間

1 回の再生にかける時間。0.8s = 0.8 秒。長いほどゆっくり動く。

animation-delay ── 開始までの遅延

0.3s なら 0.3 秒待ってから再生開始。複数要素の時間差（スタッガー）にも使う。

animation-timing-function ── イージング

• ease（初期値）：ゆるやかに始まり、速くなり、ゆるやかに終わる
• linear：最初から最後まで一定の速さ
• ease-in：最初ゆっくり → だんだん加速
• ease-out：最初速く → 最後ゆっくり（いちばんよく使う）
• ease-in-out：最初と最後がゆっくり
• cubic-bezier(…)：カーブを数値で自作
• steps(数)：なめらかではなく段階的にカクカク動かす

animation-iteration-count ── 繰り返し回数

• 1（初期値）/ 3 など：指定した回数だけ再生
• infinite：無限ループ（背景演出・ローディング等）

animation-direction ── 再生方向

• normal（初期値）：毎回 最初 → 最後 へ再生
• reverse：毎回 最後 → 最初 へ逆再生
• alternate：行って戻る往復（GSAP の yoyo に相当）
• alternate-reverse：逆方向から始まる往復

animation-fill-mode ── 再生前後の見た目

• none（初期値）：再生前後は元の CSS の状態に戻る
• forwards：終了時（最後のキーフレーム）の状態を保ち続ける
• backwards：delay 中も開始時の状態で待機する
• both：forwards と backwards の両方

animation-play-state ── 再生 / 一時停止

• running（初期値）：再生中
• paused：一時停止（ホバー中だけ止める等に使う）

GSAP との対応（リピート / yoyo）

• 無限リピート：CSS animation-iteration-count: infinite; ＝ GSAP repeat: -1
• yoyo（往復）：CSS animation-direction: alternate; ＝ GSAP yoyo: true。CSS では yoyo と呼ばず alternate 指定。

ショートハンド指定（1 行でまとめ書き）

animation: fadeIn 0.8s ease-out 0.3s infinite alternate both;

/* ↑ 左から順に
   fadeIn    … name（動きの名前）
   0.8s      … duration（実行時間）
   ease-out  … timing-function（イージング）
   0.3s      … delay（開始までの遅延）
   infinite  … iteration-count（繰り返し回数）
   alternate … direction（再生方向）
   both      … fill-mode（前後の状態保持）
*/