---
title: "CSSアニメーションとは？keyframesで動かす仕組みの基礎"
description: "JavaScriptを使わずCSSだけでロゴを光らせたりローダーを回したりしたい人向けに、@keyframesとanimationプロパティの関係を基礎から整理。繰り返しや遅延など、動きをコントロールする主なオプションまで解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/css-animation-term"
markdown: "https://giga-site.com/articles/css-animation-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# CSSアニメーションとは？keyframesで動かす仕組みの基礎

ボタンがふわっと光ったり、ローディングがくるくる回ったり。Webページの「動き」の多くはCSSアニメーションで作られています。この記事では、@keyframesとanimationの関係を起点に、JavaScriptを使わずに動きを付ける基本の考え方を、初めて触れる人にもわかるように整理します。

> Source HTML: https://giga-site.com/articles/css-animation-term
> Article index: https://giga-site.com/articles/index.md

## CSSアニメーションとは何か

CSSアニメーションとは、要素のスタイルを時間の経過にあわせて少しずつ変化させ、見た目に「動き」を生み出すCSSの機能です。位置や色、透明度、サイズといった値を、ある状態から別の状態へなめらかに移り変わらせます。

似た仕組みにtransitionがありますが、transitionが「ある状態から別の状態への一度きりの変化」を扱うのに対し、アニメーションは複数の中間地点を指定でき、繰り返しや一時停止などの細かい制御がしやすいのが特徴です。

JavaScriptを書かずにブラウザ側でなめらかに描画してくれるため、軽い装飾的な動きであればCSSだけで十分まかなえます。

## @keyframesで動きの設計図を作る

アニメーションの中身は@keyframesで定義します。@keyframesは「何パーセントの時点でどんなスタイルか」を並べた、動きの設計図のようなものです。

もっとも単純な形はfrom（開始＝0%）とto（終了＝100%）の2点だけを書く形です。さらに細かく動かしたいときは0%、50%、100%のようにパーセントで中間の状態を追加していきます。

@keyframesには名前を付けます。この名前を後でanimation側から呼び出すことで、どの要素にどの動きを適用するかを結び付けます。

## 実務ではどこで関係する？

CSSアニメーションは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

CSSアニメーションについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## animationプロパティで再生を指定する

@keyframesで作った設計図は、それ自体では何も起きません。動かしたい要素にanimationプロパティを書いて、初めて再生されます。

animationでは、使う@keyframesの名前、1回あたりの再生時間、変化のなめらかさ（イージング）、繰り返し回数、開始までの待ち時間などをまとめて指定できます。これらは個別のプロパティに分けて書くこともできます。

## 基本の書き方を順に組み立てる

実際にひとつ作る流れを、手順として並べてみます。最初はシンプルな動きから始めると挫折しにくくなります。

1. 動かしたい要素にクラスを付ける（例：ふわっと表示したい見出し）
2. @keyframesで動きを定義し、わかりやすい名前を付ける
3. 0%と100%のスタイルを書く（透明から不透明へ、など）
4. 対象のクラスにanimationを書き、@keyframesの名前と再生時間を指定する
5. ブラウザで開いて、想定どおりに動くか目視で確認する
6. 速すぎ・遅すぎなら再生時間やイージングを微調整する

## よくあるつまずきと配慮

「動かない」原因で多いのは、@keyframesの名前とanimationで呼ぶ名前が一致していないケースです。スペルや大文字小文字を見直しましょう。再生時間を指定し忘れている場合も再生されません。

動きを付けすぎると、かえって読みにくく目が疲れるページになります。意味のある箇所に絞るのが基本です。また、激しい動きが苦手な利用者のために、端末側で動きを減らす設定を尊重するprefers-reduced-motionへの配慮も知っておくとよいでしょう。

## 作った動きを誰かに見てもらうとき

アニメーションは文章で説明しても伝わりにくく、実際に動いている画面を見てもらうのが一番です。完成前のHTMLを関係者に確認してもらいたい場面は少なくありません。

ギガサイト便は、HTMLファイルやCSS/JSを含むZIPをドロップするだけで一時的な共有URLを発行できるサービスです。同じURLのままファイルを差し替えられるので、動きを微調整しながら何度もレビューしてもらう用途に向いています。社外に見せたくない試作なら、パスワードやメール認証を併用すると安心です。

## よくある質問

### CSSアニメーションとtransitionの違いは何ですか？

transitionは「ある状態から別の状態への一度きりの変化」を扱うのに対し、CSSアニメーションは@keyframesで複数の中間状態を指定でき、繰り返しや一時停止などの制御がしやすい点が違います。常時動かしたい場合はアニメーションが向いています。

### アニメーションが動かないときに最初に見る点は？

@keyframesに付けた名前と、animationで呼び出す名前が一致しているかをまず確認してください。次に再生時間が指定されているか、対象のセレクタが正しく要素に当たっているかを見ると、多くのケースで原因が見つかります。

### JavaScriptを使わずにどこまで動かせますか？

位置移動・回転・拡大縮小・色や透明度の変化など、装飾的な動きの多くはCSSだけで実現できます。ユーザーの操作に応じて複雑に分岐する処理が必要になった段階で、JavaScriptの併用を検討するとよいでしょう。

### 動きが多すぎると問題になりますか？

過剰な動きは読みづらさや目の疲れにつながり、動きが苦手な利用者には負担になります。意味のある箇所に絞り、prefers-reduced-motionで動きを控えたい設定を尊重するのが望ましいです。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎](https://giga-site.com/articles/flexbox-term/index.md)
- [position:stickyとは？スクロールで追従するヘッダーの基礎](https://giga-site.com/articles/sticky-header-term/index.md)
- [ダークモードとは？暗い配色に切り替える仕組みの基礎](https://giga-site.com/articles/dark-mode-term/index.md)
- [CSSセレクタとは？要素を狙ってスタイルを当てる基礎](https://giga-site.com/articles/css-selector-term/index.md)
- [詳細度（specificity）とは？CSSが効かない時に確認する優先順位](https://giga-site.com/articles/css-specificity-term/index.md)
- [CSSのpositionとは？static・relative・absolute・fixedの違い](https://giga-site.com/articles/css-position-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSSアニメーションとは？keyframesで動かす仕組みの基礎",
  "description": "JavaScriptを使わずCSSだけでロゴを光らせたりローダーを回したりしたい人向けに、@keyframesとanimationプロパティの関係を基礎から整理。繰り返しや遅延など、動きをコントロールする主なオプションまで解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/css-animation-term",
  "url": "https://giga-site.com/articles/css-animation-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "CSSアニメーションとtransitionの違いは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "transitionは「ある状態から別の状態への一度きりの変化」を扱うのに対し、CSSアニメーションは@keyframesで複数の中間状態を指定でき、繰り返しや一時停止などの制御がしやすい点が違います。常時動かしたい場合はアニメーションが向いています。"
      }
    },
    {
      "@type": "Question",
      "name": "アニメーションが動かないときに最初に見る点は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "@keyframesに付けた名前と、animationで呼び出す名前が一致しているかをまず確認してください。次に再生時間が指定されているか、対象のセレクタが正しく要素に当たっているかを見ると、多くのケースで原因が見つかります。"
      }
    },
    {
      "@type": "Question",
      "name": "JavaScriptを使わずにどこまで動かせますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "位置移動・回転・拡大縮小・色や透明度の変化など、装飾的な動きの多くはCSSだけで実現できます。ユーザーの操作に応じて複雑に分岐する処理が必要になった段階で、JavaScriptの併用を検討するとよいでしょう。"
      }
    },
    {
      "@type": "Question",
      "name": "動きが多すぎると問題になりますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "過剰な動きは読みづらさや目の疲れにつながり、動きが苦手な利用者には負担になります。意味のある箇所に絞り、prefers-reduced-motionで動きを控えたい設定を尊重するのが望ましいです。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```