MENU
  1. ホーム
  2. HTML , CSS
  3. CSSアニメーション入門｜@keyframesの使い方

CSSアニメーション入門｜@keyframesの使い方

HTML , CSS
目次

CSSアニメーション入門｜@keyframesの使い方

こんにちは、「ぷろぐらの森」です🌱

この記事を読むと、CSSだけで「動く」Webページが作れるようになります。

「JavaScriptを使わなくても動かせるの？」そのとおりです！CSSには「アニメーション機能」が標準で備わっていて、コードを少し書くだけでキャラクターが登場したり、ボタンが光ったりする演出が作れます。

ゲームを例にしながら一緒に試してみましょう！

この記事でわかること

  • CSSアニメーション（`@keyframes`）とトランジション（`transition`）の違い
  • フェードイン・スライド・回転・拡大縮小など定番5種の書き方
  • ゲームUIに使えるホバーボタンの作り方
  • 実践：ゲーム風スコア表示アニメーション
  • よくある失敗と解決策

「アニメーション」と「トランジション」は別物！

まず最初に、CSSには動きをつける方法が 2種類あります。
ここを混同すると「あれ？思い通りに動かない」と迷子になるので、先に整理しておきましょう！

種類プロパティ用途自動再生
アニメーション@keyframes + animation複雑な動き・ループ・自動演出✅ できる
トランジションtransitionホバー時などの状態変化❌ きっかけが必要
カラさん

ゲームで例えると…
@keyframes
➡キャラクターの「登場シーン演出」
transition
➡ボタンに触れたときの「光るエフェクト」

というイメージです！

@keyframesアニメーションの基本

書き方の基本

@keyframes アニメーション名 {
  0%   { /* 最初の状態 */ }
  100% { /* 最後の状態 */ }
}

/* ② 要素に適用する */
.要素 {
  animation: アニメーション名 時間 タイミング;
}

たったこれだけです！「0%が始まり、100%が終わり」と覚えてください。

実践例①：ふわっと登場するHPゲージ

ゲームでよくある「画面が始まったらHPバーが下からふわっと出てくる」演出を作ってみましょう。

<!DOCTYPE html>
<div class="hp-bar">
  <span>HP ████████ 100</span>
  <link rel="stylesheet" href="style.css">
</div>
</html>
style.css <- ファイルの名前

/* ふわっと出てくるアニメーション */
@keyframes slideUp {
  0% {
    opacity: 0;              /* 最初は透明 */
    transform: translateY(20px); /* 少し下にある */
  }
  100% {
    opacity: 1;              /* 完全に見える */
    transform: translateY(0);    /* 元の位置に戻る */
  }
}

.hp-bar {
  animation: slideUp 0.8s ease-out; /* 0.8秒かけて再生 */
  background: #2a2a2a;
  color: #00ff88;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 1.2rem;
}
カラさん

ease-outは「最初は速く、最後はゆっくり止まる」タイミングです。
ゲームのUIに自然な動きを出したいときに使います！

よく使うアニメーション効果5選

① フェードイン（opacity）

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* from/to は 0%/100% と同じ意味 */

② スライドイン（transform: translate）

@keyframes slideInLeft {
  from { transform: translateX(-50px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

③ 回転（transform: rotate）— ローディングに便利

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

.loading-icon {
  animation: spin 1s linear infinite; /* infinite = 無限ループ */
}

④ 拡大縮小（transform: scale）— ダメージ演出に

@keyframes damage {
  0%   { transform: scale(1);    }
  30%  { transform: scale(1.2); color: red; }  /* 瞬間的に大きくなる */
  100% { transform: scale(1);    }
}

⑤ 点滅（opacity の繰り返し）— 残りHPが少ないとき

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

.hp-danger {
  animation: blink 0.6s ease-in-out infinite;
  color: red;
}

transitionでホバーアニメーション

「ホバーしたときだけ動かしたい」というケースには transitionが簡単です。

書き方

.ボタン {
  transition: 変化させるプロパティ 時間 タイミング;
}
.ボタン:hover {
  /* ホバー時の変化後の状態 */
}

実践例②：ゲームのスタートボタン

<!DOCTYPE html>
<button class="start-btn">▶ ゲームスタート</button>
<link rel="stylesheet" href="style.css">
</html>
style.css <- ファイルの名前

.start-btn {
  background: #1a1a2e;
  color: #e94560;
  border: 2px solid #e94560;
  padding: 14px 32px;
  font-size: 1.1rem;
  border-radius: 6px;
  cursor: pointer;

  /* ← ここがポイント！変化に0.25秒かける */
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.start-btn:hover {
  background: #e94560;
  color: #fff;
  transform: scale(1.06);           /* 少し大きくなる */
  box-shadow: 0 0 16px #e9456080;   /* 光彩エフェクト */
}

.start-btn:active {
  transform: scale(0.98);           /* 押した瞬間に少し沈む */
}

マウスをのせると、ボタンが少し大きくなるアニメーションが加わります！

@keyframes vs transition 使い分けガイド

迷ったときはこの表で判断してください。

やりたいこと使うもの
ページを開いたら自動で動かしたい@keyframes
ループさせたい@keyframes + infinite
途中の状態（30%など）を細かく制御したい@keyframes
ホバー・クリックで動かしたいtransition
状態AからBへシンプルに変化させたいtransition
カラさん

💡 現役エンジニアのひとこと
現場でよく見るのは transitionの方が圧倒的に多いです。
ボタン・リンク・カード要素のホバー演出はほぼ transitionで足ります。
@keyframesを使うのはローディングスピナー、通知バナーの登場演出、ゲームUIなど『自動で動かすもの』に限定されます。

最初は transitionから覚えて、必要になったら @keyframesに進むのがおすすめです！

実践：ゲーム風スコア表示アニメーション

@keyframes と transition を組み合わせた応用例です。

<!DOCTYPE html>
  <div class="score-board">
    <p class="score-label">SCORE</p>
    <p class="score-number" id="score">0</p>
    <button class="add-btn" onclick="addScore()">+100ポイント</button>
  </div>
</html>
style.css <- ファイルの名前

.score-board {
  background: #0f0f1a;
  color: #fff;
  text-align: center;
  padding: 30px;
  border-radius: 12px;
  font-family: 'Courier New', monospace;
  width: 220px;
  margin: 40px auto;
}

.score-label {
  color: #aaa;
  font-size: 0.85rem;
  letter-spacing: 4px;
  margin: 0;
}

.score-number {
  font-size: 3rem;
  font-weight: bold;
  color: #00ff88;
  margin: 8px 0 20px;
  /* スコアが加算されたときのアニメーション */
  transition: transform 0.1s ease;
}

/* スコア加算時にクラスを付与してポップさせる */
@keyframes pop {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1);    }
}
.score-number.popping {
  animation: pop 0.3s ease-out;
}

.add-btn {
  background: transparent;
  border: 1px solid #00ff88;
  color: #00ff88;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.add-btn:hover {
  background: #00ff8820;
}
javasc.js<- ファイルの名前

let score = 0;
function addScore() {
  score += 100;
  const el = document.getElementById('score');
  el.textContent = score;
  el.classList.remove('popping');
  void el.offsetWidth; // ブラウザに「クラスが消えた」と認識させるおまじない。これがないと同じアニメーションが再発火しない
  el.classList.add('popping');
}

アニメーション作りのよくある失敗と解決策

失敗パターン原因 解決策
アニメーションが動かないanimationプロパティの綴りミスChrome DevTools で確認
ループしないinfiniteを書き忘れanimation: spin 1s linear infinite;
ホバーが効かないtransitionを:hoverの側に書いているtransitionは通常時のセレクタに書く
動きがカクカクleft/topを動かしているtransform: translate()に変える（GPU最適化）
カラさん

💡 現役エンジニアのひとこと
left や top でアニメーションするとブラウザが毎フレームレイアウトを再計算するので重くなります。
スマホでカクつく原因の多くはこれです(´;ω;｀)
transformと opacity に変えるだけでスムーズになることがほとんどです。

まとめ：CSSアニメーション 早見表

  1. 【自動で動かす】 @keyframes + animation
    • ループ・ページ読み込み演出・ゲームUI
  2. 【操作で動かす】 transition
    • ホバー・クリック・フォーカス
  3. 【パフォーマンス優先なら】transform / opacity を使う
    •   → left / top / width の変化は重い

CSSアニメーションをマスターすると、Webページの「印象」がガラッと変わります。
まずはホバーボタン（transition）から試してみて、慣れてきたら @keyframesで本格的なゲームUIに挑戦してみてください！

関連記事

ぷろぐらの森
CSSとは？HTMLの見た目を変えるしくみをやさしく解説 – ぷろぐらの森 CSSを使って自己紹介ページをカラフルに装飾する方法を初心者向けに解説！ CSSとは？HTMLの見た目を変えるしくみをやさしく解説
ぷろぐらの森
【超初心者向け】HTMLで自分のWebページを作る方法 – ぷろぐらの森 HTMLを使って自己紹介ページを作る方法を、プログラミング初心者や小学生にもわかりやすく解説！楽しくコーディング体験ができます。
ぷろぐらの森
【小学生でもOK】HTMLでミニゲームを作る3ステップ – ぷろぐらの森 HTMLとCSSだけで作れる超かんたんゲームを紹介！プログラミング初心者や子ども向けに、実際のコード付きでわかりやすく解説します。
ぷろぐらの森
HTML・CSS・JSでシューティングゲームを自作しよう！全コード完全解説 – ぷろぐらの森 エンジン不要！HTML、CSS、JavaScriptだけで本格的なシューティングゲームを作る方法を、現役エンジニアがコード付きで完全解説。Canvasを使った描画から当たり判定のロジ…

もっと本格的にCSSを学びたい方へ

この記事でCSSアニメーションの楽しさが伝わったなら、ぜひ体系的にフロントエンドを学んでみてください。

独学で詰まりやすいポイント（FlexboxやGridとアニメーションの組み合わせ、レスポンシブ対応など）も、
プログラミングスクールなら現役エンジニアにすぐ聞ける環境で学べます。

まずは書籍から始めたい方はこちら

ぷろぐらの森
【2025年版】おすすめプログラミング本10選｜初心者〜中級者編 – ぷろぐらの森 プログラミング初心者から中級者までにおすすめの本を厳選紹介。PHP・Laravel・HTML/CSS・JavaScriptまで、学習のステップに応じた本を選べば効率よくスキルアップできます…

HTML , CSS
CSS アニメーション 初学者向け解説
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

カラさんのアバター カラさん

神奈川県出身
どこにでもいる現役ゲーム会社サーバーエンジニア。大学ではひたすらゲーム！ゲーム！という人生を送ってました。

このブログは「ゲームを作ってみたい！」「プログラミングに関する知識をつけたい！」そんな皆さんの少しでもお役になれば嬉しいなと思い開設しました。

趣味
YouTube鑑賞、ストリートな格闘ゲーム、キャンプ

最近の出来事
・痔主になってしまいました....
・Google Cloud Professional Cloud Architect取得しました。

関連記事

コメント

コメントする

目次