サイトに「動き」をつけるCSSアニメーション｜基本的な使い方と実例

Webサイトにアニメーションを取り入れると、ちょっとした強調や演出効果を加えられデザイン全体がぐっと引き締まります。CSSの @keyframes と animation を組み合わせれば、JavaScriptを使わなくても豊かな動きを表現可能。

この記事では CSSアニメーションの基本から実例コードまで をまとめて紹介します。

CSSアニメーションの基本

CSSアニメーションを指定するには、主に次の2つのプロパティを使います。

• @keyframes … アニメーションの動きを定義するルール
• animation … 定義したアニメーションを実際に要素に適用するプロパティ

@keyframes

アニメーションの開始から終了までを「どのタイミングで、どのように変化させるか」を定義します。

基本構造

/* アニメーションの開始から終了までを指定する */
@keyframes animation-name {
  0% {
    /* 初期状態のスタイル */
  }
  100% {
    /* 最終状態のスタイル */
  }
}

0% と 100% は、それぞれアニメーションの開始・終了を意味します。

同じ意味で from と to も使えます。

@keyframes animation-name {
  from {
    /* 初期状態 */
  }
  to {
    /* 最終状態 */
  }
}

• 実例：要素を下方向に移動
  例えば、要素を 上から下に50px移動 させるシンプルなアニメーションは次のように書きます。

/* 要素を下方向に移動させるアニメーション */
@keyframes moveDown {
  from {
    transform: translateY(0);    /* 初期位置 */
  }
  to {
    transform: translateY(50px); /* 50px下に移動 */
  }
}

• 複数ステップを指定する
  @keyframes では、途中経過も細かく指定できます。

@keyframes changeColor {
  0% {
   background-color: pink;
  }
  50% {
   background-color: lightblue;
  }
  100% {
   background-color: yellow;
  }
}

animation

定義した @keyframes を どの要素に適用するか を指定します。

.element {
  animation: moveDown 2s linear infinite;
}

animation はまとめて指定できるプロパティで、以下の情報を一括設定します。

• アニメーション名（例: moveDown）
• 再生時間（例: 2s）
• 速度変化（例: linear）
• 繰り返し回数（例: infinite）

アニメーション例

下記のコードでは、.element クラスの要素が 2秒ごとに50px下に移動し、元に戻る アニメーションを無限に繰り返します。

アニメーションの要素

/* moveDown アニメーションの定義 */
@keyframes moveDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(50px);
  }
}

/* .element にアニメーションを適用 */
.element {
  animation: moveDown 2s linear alternate infinite;
}

CSSアニメーションのサブプロパティ

animation プロパティは、以下のようなサブプロパティで細かく制御できます。一括指定する animation は、これらをまとめて書いたショートハンドです。

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

どのアニメーションを適用するかを指定します。

.element {
  animation-name: moveDown;
}

• @keyframes で定義した名前を指定
• ショートハンドでまとめて指定することも可能

animation-duration｜1回分の時間（例: 2s）

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

.element {
  animation-duration: 2s; /* 2秒で1サイクル */
}

• 秒単位（s）やミリ秒（ms）で指定
• 長いほどゆっくり、短いほど早く動きます

animation-timing-function｜進行速度の変化（例: ease, linear）

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

.element {
  animation-timing-function: ease;
}

• linear → 速度一定
• ease → 初期値：ゆっくり始まり、速く、最後にゆっくり終わる
• ease-in → ゆっくり始まる
• ease-out → ゆっくり終わる
• ease-in-out → ゆっくり始まり、ゆっくり終わる

linear

ease

ease-in

ease-out

ease-in–out

animation-delay｜開始の遅延時間

アニメーションの開始を遅らせたいときに使用します。

.element {
  animation-delay: 1s; /* 1秒後にアニメーション開始 */
}

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

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

.element {
  animation-iteration-count: infinite; /* 無限に繰り返す */
}

• 数字を指定するとその回数だけ繰り返す
• infinite は無限に繰り返す

animation-direction｜再生方向

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

.element {
  animation-direction: alternate; /* 行ったり来たり */
}

• normal → 初期状態 → 最終状態（繰り返す場合は最初から）
• reverse → 最終状態 → 初期状態
• alternate → 奇数回は正方向、偶数回は逆方向（行ったり来たり）
• alternate-reverse → 奇数回は逆方向、偶数回は正方向

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

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

.element {
  animation-fill-mode: forwards; /* 最終状態を保持 */
}

• none → アニメーション前後で何も変更なし
• forwards → アニメーション後の状態を保持
• backwards → アニメーション前の状態を保持（delay中）
• both → backwardsとforwardsの両方を適用した状態。animation-delay の間は キーフレーム（0%）の表示、再生後はキーフレーム（100%）のスタイルが適用されます。

animation-play-state｜再生の一時停止／再開

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

.element {
  animation-play-state: paused; /* 一時停止 */
}

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

よく使うCSSアニメーション実例集｜フェードイン・バウンド・スライド・回転・点滅

CSSアニメーションを理解したら、実際にサイトで使えるアニメーションを試してみましょう。ここでは 初心者でも簡単に使えるコピペ用サンプル を紹介します。

フェードイン（徐々に表示）

要素が徐々に表示されるアニメーションです。

See the Pen animation｜フェードイン by Turicco (@Turicco) on CodePen.

/* フェードイン */
@keyframes fade-in {
  from {
    opacity: 0; /* 初期は透明 */
  }
  to {
    opacity: 1; /* 完全に表示 */
  }
}

/* アニメーション設定 */
  animation: fade-in 2s ease-in forwards; /* 2秒でゆっくりフェードイン */
}

解説

@keyframes fade-in
要素の透明度（opacity）を変化させるアニメーションを定義しています。

• from … 透明な状態（opacity: 0）から開始
• to … 完全に表示された状態（opacity: 1）に到達

animation プロパティ

• fade-in … 使用するアニメーション名
• 2s … アニメーションの継続時間（2秒）
• ease-in … ゆっくり始まる再生速度に設定
• forwards … アニメーション終了後も最終状態を保持

バウンド（上下に弾む）

要素が上下にバウンドするように動くアニメーションです。

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

/* バウンド */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); /* 初期位置 */
  }
  40% {
    transform: translateY(-30px); /* 一番高く跳ねる位置 */
  }
  60% {
    transform: translateY(-15px); /* 少し低めで跳ね返る位置 */
  }
}

/* アニメーション設定 */
.element {
  animation: bounce 2s infinite; /* 2秒間隔で無限にバウンド */
}

解説

@keyframes bounce
要素を上下に移動させ、バウンドしているような動きを定義しています。

• 0%, 20%, 50%, 80%, 100% … 元の位置（translateY(0)）に戻るタイミング
• 40% … 一番高く跳ね上がる位置（translateY(-30px)）
• 60% … 少し低めに跳ね返る位置（translateY(-15px)）

animation プロパティ

• bounce … 適用するアニメーション名
• 2s … 1回のアニメーション時間（2秒）
• infinite … 無限に繰り返す指定

スライド表示（文字が左から右へ）

要素を左から右にスライドさせて文字を表示するアニメーションです。

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

/* 文字をスライド */
@keyframes slide {
  from {
    width: 0;   /* 非表示（幅0） */
  }
  to {
    width: 100%; /* 全表示（テキスト全体の幅） */
  }
}

/* アニメーション設定 */
.slide-text {
  animation: slide 3s linear forwards;
}

解説

@keyframes slide
幅の変化によって文字がスライド表示されるアニメーションを定義しています。

• from { width: 0 } … 幅0で文字を隠した状態から開始
• to { width: 100% } … 幅を広げて文字全体を表示

.slide-text のスタイル

• display: inline-block … 幅を持たせてアニメーションを有効化
• white-space: nowrap … 文字を改行せず1行に表示
• overflow: hidden … 幅が足りない間の文字を隠す
• animation: slide 3s linear forwards … 3秒かけて滑らかに表示し、最終状態を保持

回転アニメーション（360度回転）

要素が 360 度回転するシンプルなアニメーションです。

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

/* 回転アニメーション */
@keyframes rotate {
  from {
    transform: rotate(0deg);   /* 初期状態：回転なし */
  }
  to {
    transform: rotate(360deg); /* 最終状態：360度回転 */
  }
}

/* アニメーション設定 */
.rotate-demo {
  display: inline-block; /* 回転対象をブロック化 */
  animation: rotate 3s linear infinite;  /* 3秒で一定速度回転を無限に繰り返す */
}

解説

@keyframes rotate
要素を回転させるアニメーションを定義しています。

• from { transform: rotate(0deg) } … 回転前の初期状態
• to { transform: rotate(360deg) } … 360度回転した状態

.rotate-demo のスタイル

• display: inline-block … transform を適用するために指定
• animation: rotate 3s linear infinite
  • 3s … 3秒で1周回転
  • linear … 一定速度で回転
  • infinite … 無限に繰り返す

点滅（Blink）

要素が点滅するアニメーションです。

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

/* 点滅アニメーション */
@keyframes blink {
  0%, 100% {
   opacity: 1; /* アニメーションの最初と最後で完全に表示 */
  }
  50% {
   opacity: 0; /* アニメーションの中間で完全に透明 */
  }
}

/* アニメーション設定 */
.element-7 {
  animation: blink 1s step-start infinite; /* アニメーションを1秒間隔で無限に繰り返し、step-startで段階的に透明化 */
}

解説

@keyframes blink
要素の透明度を切り替え、点滅するアニメーションを定義しています。

• 0%, 100% { opacity: 1 } … 最初と最後は完全に表示
• 50% { opacity: 0 } … 中間で透明になる

animation プロパティ

• blink … 使用するアニメーション名
• 1s … 1秒ごとに点滅
• step-start … 透明化を段階的に切り替え
• infinite … 無限に繰り返す

このアニメーションは、例えば警告メッセージや通知の点滅表示、インタラクティブなエレメントに適用することができます。より滑らかに点滅するアニメーションをこちらの記事に掲載しています！

共通クラス化して使い回す

同じアニメーションを複数の要素で使う場合は、共通クラスを作ると便利です。

/* フェードインアニメーション */
@keyframes fadeIn {
  from {
   opacity: 0;
  }
  to {
   opacity: 1;
  }
}

/* 共通のフェードインスタイル */
.fade-in {
  animation: fadeIn 2s ease-in;
}

HTMLでは、クラスを適用するだけで再利用できます。

<div class="fade-in">要素1</div>
<div class="fade-in">要素2</div>

アニメーションを学べる実用書「動くWebデザイン アイディア帳」

「動くWebデザイン アイディア帳」は、Webデザインにおける動きやアニメーションの実装を具体的に学べる実用書です。

主に以下のような特徴があります。

• 実例をもとにした解説
  実際のWebサイトで使われているアニメーションや動きのデザインを例に挙げ、その作り方を解説しています。視覚的にイメージしやすく初心者からプロまで参考にできる内容です。
• 幅広い技術のカバー
  CSSアニメーション、JavaScript、jQueryなど、Webアニメーションを実現するための多彩な技術を扱っています。
• コード付きで分かりやすい
  サンプルコードが豊富に掲載されておりすぐに試して学べる構成になっています。コードの各部分に説明があるので理解が深まります。
• 動きのデザインの考え方を学べる
  ただ動かすだけでなく、ユーザー体験（UX）を向上させるための効果的な動きや、デザイン全体の調和を考えたアニメーションについても触れられています。
• デザイナーやエンジニアのアイデアソース
  Webデザインに新しい動きを取り入れたいクリエイターにとって、実用的なヒントやアイデアが満載です。

初心者から中級者まで幅広い層に適した、Webデザインやフロントエンド技術を学びたい方におすすめの一冊です。

まとめ

CSSアニメーションを使用することで、ウェブページに動きを加えることができます。

基本的な@keyframesとanimationプロパティの使い方を理解することで、さらに複雑なアニメーションを簡単に作成することができます。

アニメーションをスムーズに動かすためには、タイミングや動きの設定が重要です。もし、より簡単に滑らかな変化を加えたい場合は、CSSのトランジション機能も活用できます。以下の記事で CSS Transitionの使い方 を詳しく解説していますので、併せてご覧ください。

スライドアニメーションを応用すれば、複数画像を切り替えるスライダーも簡単に作れます。以下の記事では、CSSで実装する複数画像のスライダーアニメーションの作り方を詳しく解説しています。

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