CSSアニメーションの基本と使い方【初心者向け】@keyframes・実例・軽くするコツ

Webサイトに動きを加えたいなら、まず覚えておきたいのが CSSアニメーション（@keyframes と animation） です。

この2つを理解すれば、JavaScriptを使わなくてもフェードイン・スライド表示・ローディング演出など、実務でよく使われるアニメーションを実装できるようになります。

しかも、軽く・自然に・パフォーマンスを意識した動きもCSSだけで十分に可能です。

この記事では、

までを、初心者にもわかるように丁寧に解説します。

CSSアニメーションとは？

CSSアニメーションとは、CSSだけで要素に動きや変化をつける仕組みのことです。

JavaScriptを使わなくても、フェードイン・スライド・回転などの演出が実装できます。

仕組みはとてもシンプルで、考え方も難しくありません。

CSSアニメーションの仕組み

この2つでアニメーションは動きます。

できること

CSSアニメーションでよく使われる表現は次のとおりです。

• フェードイン（表示を自然にする）
• スライド表示（視線誘導）
• 回転（ローディング）
• 繰り返し動作（注意喚起）

重要なのは、派手さではなく「情報を分かりやすく伝えるために使う」ことです。

CSSアニメーションの基本（初心者向け）

ここでは、実際にアニメーションを書けるようになるための基本を解説します。

@keyframes で動きを定義

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

「透明 → 表示」の動きを定義しています。

animation で適用

animation は、定義したアニメーションを要素に適用するためのプロパティです。

.box {
  animation: fade 1s ease forwards;
}

これで .box は1秒かけてフェードインします。

実務でよく使う型（移動＋往復）

@keyframes move {
  from { transform: translateY(0); }
  to   { transform: translateY(20px); }
}

.element {
  animation: move 1.5s ease-in-out infinite alternate;
}

alternate を使うと、

• 下に動く
• 元に戻る

を自動で繰り返します。

animation と transition の違い

比較項目	animation	transition
再生タイミング	自動で開始できる	状態変化が必要（hover など）
keyframes	必要	不要
動きの定義	複数段階で細かく制御できる	開始 → 終了の1段階のみ
ループ	可能（infinite）	不可
主な用途	ローディング、スライド、フェード表示	ボタンhover、色変化
記述量	やや多い	シンプル

transition

「状態が変わったときの変化をなめらかにするもの」

button:hover {
  background: black;
  transition: 0.3s;
}

→ hover しなければ動かない

animation

「時間経過で自動的に動かすもの」

.box {
  animation: fade 1s forwards;
}

→ 読み込み時に勝手に動く

使い分け

• ユーザー操作に反応 → transition
• 自動的に動かしたい → animation
• 複数段階の動き → animation
• 単純な変化 → transition

animationの各プロパティを理解する

ここでは、CSSアニメーションをより正確にコントロールするための仕組みを解説します。

まずは @keyframes の詳細から見ていきましょう。

@keyframes の書き方を理解する

0% と 100% の意味

@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

• 0% ＝ アニメーション開始時
• 100% ＝ アニメーション終了時

つまり、時間の進行割合を指定しています。

from / to との違い

同じコードは、次のようにも書けます。

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

• from ＝ 0%
• to ＝ 100%

意味は完全に同じです。

• シンプルな動きなら from / to でOK
• 途中段階があるなら % 表記を使う

複数ステップ（中間地点を入れる）

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

このように途中段階を入れることで、

• 行って
• 戻って
• また行く

といった複雑な動きも作れます。

animation プロパティを分解する

animation はショートハンドプロパティです。

.element {
  animation: move 2s ease 1s infinite alternate forwards;
}

実は次の個別プロパティの集合です。

ひとつずつ解説します。

基本設定

animation-name｜アニメーション名

animation-name: move;

@keyframes で定義した名前を指定します。

animation-duration｜再生時間

animation-duration: 2s;

アニメーション1回分の時間を指定します。

• 秒（s）、ミリ秒（ms）で指定
• 長いほどゆっくり、短いほど早く動く

animation-delay｜開始遅延

animation-delay: 1s;

一定時間後に開始します。

※ delay中は通常状態のまま表示されます。

動きの制御

animation-timing-function｜速度変化

animation-timing-function: ease;

アニメーションの進行速度の変化を指定します。

▼ 代表的な値

• linear → 一定速度
• ease → 初期値（自然な加減速）
• ease-in → ゆっくり始まる
• ease-out → ゆっくり終わる
• ease-in-out → 両端がゆっくり

UIでは ease か ease-in-out がよく使われます。

▼ 実際に動かして比較しているサンプル

linear

ease

ease-in

ease-out

ease-in-out

animation-direction｜再生方向

animation-direction: alternate;

アニメーションの再生方向を制御します。

• normal → 常に順方向
• reverse → 常に逆方向
• alternate → 行ったり来たり
• alternate-reverse → 逆から開始して往復

再生制御

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

animation-iteration-count: infinite;

アニメーションの繰り返し回数を指定します。

• 数値 → 指定回数
• infinite → 無限ループ

※ 無限ループはCPUを使うため、常時使用は最小限に。

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

animation-play-state: paused;

アニメーションを一時停止・再開できます。

• running：再生中
• paused：一時停止中

JSと組み合わせると制御できます。

状態の保持

animation-fill-mode｜再生中・再生後のスタイル

animation-fill-mode: forwards;

アニメーションの再生前・再生後のスタイルを制御します。

• none → 何も保持しない
• forwards → 終了後の状態を維持
• backwards → delay中に開始状態を適用
• both → 前後とも適用

フェードイン演出では forwards がよく使われます。

ここまで理解すれば、

• キーフレームの設計
• 再生時間の調整
• 速度制御
• ループ制御
• 状態保持

が自在にできるようになります。

次は、これらを実務でどう組み合わせるかを実例で見ていきましょう。

よく使うCSSアニメーション実例集（実装力アップ）

CSSアニメーションを理解したら、実際のサイト制作で使える動きを押さえましょう。

ここではよく使われる代表的なパターンを厳選しています。

動きが分かりやすいよう、アニメーション部分のみ抜粋しています。

フェードイン（徐々に表示）｜まず覚える基本

難易度：★☆☆
使用頻度：★★★★★

用途
スクロール表示・モーダル表示・画像読み込み時など

ポイント
opacityのみ。最も基本的なアニメーション。

→ 迷ったらまずこのパターンから。

See the Pen スクロールアニメーション｜フェードイン（fade-in） by Turicco (@Turicco) on CodePen.

.anim-fade {
  opacity: 0;
  animation: fade-in 1s ease-in-out forwards;
}

@keyframes fade-in {
  to { opacity: 1; }
}

スライド表示（左から右へ）｜transformの基本

難易度：★☆☆
使用頻度：★★★★☆

用途
見出し表示・ヒーローエリアの導入演出

ポイント
transformを使った位置移動の基本パターン。

See the Pen animation｜ by Turicco (@Turicco) on CodePen.

.anim-slide {
  transform: translateX(-120%);
  animation: slide-in 1s ease-out forwards;
}

@keyframes slide-in {
  to { transform: translateX(0); }
}

フェード＋スライド｜実務で最も使う型

難易度：★★☆
使用頻度：★★★★★

用途
カードUI・料金表・記事一覧・LP構成要素

ポイント
opacity + transform の組み合わせ。
→ 実務で最も使用頻度が高い王道型。

See the Pen animation｜フェード＋スライド（自動再生版） by Turicco (@Turicco) on CodePen.

.anim-fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.6s ease-out forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

遅延表示（連続表示）｜UIが一気に洗練される

難易度：★★☆
使用頻度：★★★★★

用途
カードの順番表示・ギャラリー・メニュー一覧

ポイント
animation-delayを使うだけで完成度が上がる。

See the Pen animation｜遅延表示（連続アニメーション版） by Turicco (@Turicco) on CodePen.

.item {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-up 0.6s ease-out forwards;
}

.item:nth-child(2) { animation-delay: .2s; }
.item:nth-child(3) { animation-delay: .4s; }

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

バウンド（上下に弾む）｜注意喚起・CTA向け

難易度：★★☆
使用頻度：★★★☆☆

用途
CTAボタン・スクロール誘導

ポイント
視線誘導に有効。ただし多用はNG。

See the Pen animation｜バウンド by Turicco (@Turicco) on CodePen.

.anim-bounce {
  animation: bounce 1.5s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

回転アニメーション（360度）｜ローディング向け

難易度：★☆☆
使用頻度：★★★☆☆

用途
ローディングアイコン・装飾アニメ

ポイント

linearを使うと一定速度で自然に回転。

See the Pen animation｜回転 by Turicco (@Turicco) on CodePen.

.anim-rotate {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

点滅（Blink）｜使用は慎重に

難易度：★☆☆
使用頻度：★☆☆☆☆

用途
緊急通知・注意表示

ポイント

強い点滅はアクセシビリティに配慮する。

See the Pen animation｜点滅 by Turicco (@Turicco) on CodePen.

.anim-blink {
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

※ なめらかに点滅させる方法は別記事で詳しく解説しています。

【重要】一歩レベルアップするCSSアニメーションの考え方

基本を理解したら、次は「より自然で軽い動き」にするポイントを押さえましょう。

パフォーマンスを意識する

アニメーションは書き方によって「軽さ」が変わります。

transform と opacity を使う理由

transform と opacity は、ブラウザが比較的軽く処理できます。

/* 軽い書き方 */
.box:hover {
  transform: translateX(20px);
  opacity: .8;
}

なめらかに動きやすくなります。

避けたいプロパティ（top / left / width）

これらはレイアウトを再計算するため、負荷が高くなります。

/* あまりおすすめしない */
.box:hover {
  left: 20px;
}

見た目は同じでも、処理が重くなりやすいです。

レイアウト → ペイント → コンポジット（ざっくり理解）

ブラウザは画面を次の順番で描画しています。

自然な動きを設計する

軽さを意識できたら、次は「動きの印象」を整えます。

イージング

動きの印象は「速度の変化」で決まります。

animation-timing-function: ease;
animation-timing-function: linear;

• ease：自然（基本はこれ）
• linear：一定速度（やや機械的）

UIでは ease / ease-out を使うことが多いです。

• 細かく調整したい場合

animation-timing-function: cubic-bezier(.68,-0.55,.27,1.55);

少し跳ねる動きも作れます。

• カクッと動かしたいとき

animation-timing-function: steps(5);

タイピング風アニメに向いています。

速度の目安

• ホバー：0.2〜0.3秒
• フェード：0.6秒前後
• モーダル：0.3〜0.4秒

速すぎるとせわしく、遅すぎるともっさりします。少し物足りないくらいがちょうどいいです。

状態管理と実務テクニック

animation-fill-mode

アニメーション後の状態も重要です。

animation-fill-mode: forwards;

• forwards：終了後の状態を維持
• both：開始前と終了後を適用

よく使うのは forwards です。

JS連携

CSS側でアニメーションを定義しておき、JavaScriptでクラスを切り替えるのが基本パターンです。

button.addEventListener('click', ()=>{
  modal.classList.add('open');
});

スクロールに合わせたアニメーションを実装したい場合は、Intersection Observer を使う方法がおすすめです。

実際のコード例や具体的な実装手順については、以下の記事で詳しく解説しています。

アクセシビリティへの配慮

prefers-reduced-motion

動きが苦手な人への配慮も大切です。OS側で「視覚効果を減らす」を有効にしているユーザーに対して、アニメーションを弱めたり停止したりできます。

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

これは「動きを減らす設定の人にはアニメーションを無効にする」という意味です。

すべて止める必要はありません。

理想は、

• 大きく移動する演出 → オフ
• 軽いフェードイン → 残す
• 必須のフィードバック（ボタンの反応など）→ 残す

のように「強い動きだけ抑える」ことです。

やりすぎに注意

アニメーションは「多ければ良い」わけではありません。

• 速すぎる（0.1秒未満は認識しづらい）
• 多すぎる（常にどこかが動いている状態）
• 意図がない（目的のない装飾）

動きには必ず目的を持たせましょう。

アニメーションは装飾ではなく情報伝達

良いアニメーションは「意味」を持っています。

• ボタンが浮く → 押せる
• モーダルが出る → 別レイヤー
• 軽く揺れる → 注意

「どう動かすか」より
「なぜ動かすか」を考えることが大切です。

アニメーションをさらに学びたい人へ「動くWebデザイン アイディア帳」

「動くWebデザイン アイディア帳」は、Webサイトの動き・アニメーションを実例ベースで体系的に学べる人気の実用書です。

• 実例ベースでわかりやすい
• 幅広い技術をカバー
• コード付きで手を動かしやすい
• 「動きのデザイン」の考え方も学べる
• アイデアの引き出しが増える

まとめ

• 複雑な動きは animation（@keyframes）を使う
• 簡単な変化は transition が向いている
• 軽くするなら transform / opacity を使う
• 速さは 0.2〜0.6秒が目安
• 動きには必ず目的を持たせる

CSSアニメーションは「動かす技術」ではなく情報をわかりやすく伝えるための手段です。

基本を押さえたうえで、軽さ・自然さ・目的を意識することで、動きはデザインの邪魔をせず心地よいアクセントになります。

より手軽に滑らかな変化を加えたい場合は、CSSのトランジション機能も活用できます。使い方は以下の記事で詳しく解説していますのであわせてご覧ください。

スライドアニメーションを応用すれば、複数画像を切り替えるスライダーも簡単に作れます。

これらの記事を参考に、さまざまなアニメーションを試してみてください。