CSSアニメーションの基礎を解説します。@keyframes や animation プロパティの使い方から、実務で使えるテクニックまでを順番に説明していきます。
CSSで動きを作る2つの手法
用途に合わせて使い分けます。
- transition（単純な状態変化） マウスホバー時などに、プロパティの値を一度だけ滑らかに変える。
- animation（複雑なアニメーション） 自動再生やループ、3段階以上の複雑な動きを作る。
animation の基本構成
animation は、「設計図」と「実行の指示」の2つを組み合わせて使います。
① @keyframes（動きの設計図）
「どのタイミングで、どんな状態にするか」を定義します。
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}- 0%（from）: 開始時の状態
- 100%（to）: 終了時の状態
- その中間（50%など）を足せば、より複雑な動きになります。
② animationプロパティ（実行の指示）
要素に設計図を割り当て、再生時間を指定します。
- animation-name: 設計図の名前
- animation-duration: 再生時間（例:
2s）
【実践】最短3ステップで要素を動かしてみよう
@keyframes（設計図）と animation（指示）を使い、実際にHTML要素を動かしましょう。
ここでは、「要素を右にスライドさせる」一番簡単なアニメーションを3つのステップで実現します。
ステップ1：HTML要素と基本スタイルを準備する
動かすための div 要素をHTMLに用意し、その見た目と初期位置をCSSで設定します。
<!-- HTML -->
<div class="box">動くよ！</div>
/* style.css */
.box {
width: 100px;
height: 100px;
background-color: skyblue;
color: white;
display: flex;
justify-content: center;
align-items: center;
/* ★要素を動かすための初期位置を定義（重要！） */
transform: translateX(0);
}
ステップ2：@keyframes で「変化の設計図」を作る
次に、「右に300ピクセル移動する」という動きの設計図（slide-right）を作成します。この段階では要素はまだ動きません。
/* style.cssに追記 */
@keyframes slide-right {
0% {
/* スタート時: X軸（横方向）に移動なし */
transform: translateX(0);
}
100% {
/* ゴール時: X軸（横方向）に300px移動 */
transform: translateX(300px);
}
}
ステップ3：animation プロパティを要素に適用する
最後に、作成した設計図を .box に適用し、動き出すための指示（名前、時間、緩急）を与えます。
/* style.cssを更新 */
.box {
/* ... ステップ1のスタイル ... */
/* ↓ ↓ ↓ ここからアニメーションの指示 ↓ ↓ ↓ */
animation-name: slide-right; /* どの設計図を使うか（名前）*/
animation-duration: 2s; /* 2秒かけて動かす（時間）*/
animation-timing-function: ease; /* 動きに緩急をつける（速度変化）*/
}
この3ステップで、box要素が2秒かけて右に移動するアニメーションが実現します。
👆ブラウザをリロードしたら動きます
コピペで使える！実用的なアニメーションテクニック
基礎が固まったところで、実務で頻繁に使う応用テクニックを見ていきましょう。これらのテクニックを組み合わせることで、サイトの表現力が格段に向上します。
ホバー時のバウンド演出
マウスホバー時に、transform プロパティを使って要素を一度だけ跳ねさせる設定です。
/* 1. 動きの設計図（@keyframes）を作成 */
@keyframes box-bounce {
0%, 100% {
/* 0%と100%は通常の状態 */
transform: translateY(0); /* Y軸（垂直方向）に移動なし */
}
50% {
/* 中間地点で上に少し持ち上げる */
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 影を濃くする */
}
}
/* 2. ホバー時にアニメーションを適用 */
.box:hover {
/* ホバー時だけ設計図の動きを再生 - 個別のプロパティで記述 */
animation-name: box-bounce; /* どの設計図を使うか */
animation-duration: 0.8s; /* 再生時間 */
}👆マウスを乗せてください
「無限ループ」アニメーションの実装
ローディング画面や背景の要素を常に動かしたい場合に、アニメーションを無限に繰り返す設定を使います。
「無限」の繰り返し設定
animation プロパティに以下の設定を追加するだけで実現できます（「実践」で作った slide-right の動きを無限化する例）。
.box {
animation-name: slide-right;
animation-duration: 3s; /* 再生時間を3秒に変更 */
animation-timing-function: linear; /* スピードを一定にする */
/* ↓ ↓ ↓ ここが無限ループの設定 ↓ ↓ ↓ */
animation-iteration-count: infinite; /* ★繰り返し回数を「無限」に設定 */
animation-direction: alternate; /* ★端まで行ったら逆再生して戻る */
}
応用：アニメーションの「遅延」と「繰り返し回数」を制御するコツ
アニメーションにリズムやバリエーションを持たせるための応用設定です。
① アニメーションの開始を遅らせる (animation-delay)
要素が表示されてから少し時間差をおいてアニメーションを始めたい場合に設定します。
.box {
/* ...他の設定... */
animation-delay: 0.5s; /* ★0.5秒待ってから再生開始 */
}
② 繰り返し回数を指定する (animation-iteration-count)
無限ではなく、「3回だけ繰り返したい」といった具体的な回数を指定できます。
.box {
/* ...他の設定... */
animation-iteration-count: 3; /* ★アニメーションをちょうど3回繰り返す */
}
これらの設定を駆使することで、複数の要素を動かす際のタイミングをずらし、洗練された演出を作り出せます。
動かない時の確認事項
コードを書いても動かない場合は、以下の3点を確認してください。
- 名称の一致:
@keyframesの名前とanimation-nameが完全に一致しているか（大文字・小文字も区別されます）。 - 再生時間の設定:
animation-durationが指定されているか。未指定（0秒）だと実行されません。 - プロパティの選定:
opacityやtransformなど、数値で変化を計算できるプロパティを使用しているか。
animation プロパティの利点
単純な状態変化（transition）と違い、以下の制御が可能になります。
- 自動再生とループ: ページ読み込み時の実行や、無限に繰り返す動き。
- 複数の中継地点: 0%から100%の間に中継点（50%など）を増やし、多段階の動きを作れる。
- 終了状態の保持: 実行後に元の状態に戻さず、最後のコマの状態で静止させられる。
アニメーションの関連リンク
animationプロパティを一括指定で書く方法
アニメーションを一時停止・再開する方法
animation-timing-functionの違いを確認
