過去バージョン

animation プロパティとは

animation は CSS だけで時間軸に沿った変化を表現するプロパティです。あらかじめ @keyframes でフレーム（時間点ごとの状態）を定義し、それを animation-name で要素に当てます。transition がイベント駆動（hover などをきっかけに 1 回変化）であるのに対し、animation は能動的に何度でも動かせます。

基本構文

/* 1. @keyframes でフレームを定義 */
@keyframes slidein {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* 2. 要素に適用 */
.item {
  animation-name: slidein;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
}

/* 短縮記法（1 行） */
.item2 {
  animation: slidein 0.5s ease-out;
}

個別プロパティ一覧

短縮記法

/* name | duration | timing-function | delay | iteration | direction | fill-mode | play-state */
.bounce {
  animation: bounce 1s ease-in-out 0s infinite alternate;
}

/* 複数指定（カンマ区切り） */
.complex {
  animation:
    fadein  0.5s ease-out,
    slidein 0.5s ease-out 0.2s;
}

@keyframes の書き方

キーフレームは from/to または % 指定で書きます。% は 0% — 100% の範囲で、自由に中間点を挟めます。

/* 2 点指定 */
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 多段階指定 */
@keyframes pulse {
  0%   { transform: scale(1);   }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1);   }
}

/* 複数プロパティを同時に */
@keyframes spinFade {
  0%   { transform: rotate(0deg);   opacity: 0; }
  50%  { transform: rotate(180deg); opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0; }
}

animation-fill-mode の挙動

animation と transition の違い

実例 1: ローディングスピナ

.spinner {
  width: 40px; height: 40px;
  border: 4px solid #eee;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

実例 2: フェードイン（forwards で残す）

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease-out 0.2s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

実例 3: hover で一時停止

.marquee {
  animation: scroll 10s linear infinite;
}
.marquee:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

イージング（timing-function）

アクセシビリティ — prefers-reduced-motion

OS の「視差効果を減らす」「アニメーションを減らす」設定を有効にしているユーザーには、アニメーションを抑制 / 無効化するのが望ましいです。三半規管が弱い人や、認知特性上不快に感じる人への配慮です。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

パフォーマンスのコツ

• 変形は top / left ではなく transform を使う（GPU 合成）
• 不透明度は opacity を使う（同じく合成レイヤ）
• animation 用のレイヤを事前生成するなら will-change: transform, opacity
• 大量要素を同時に animate するとレイヤが増えすぎてメモリ圧迫
• SVG / canvas / Web Animations API も選択肢に

JavaScript からの制御

const el = document.querySelector('.box');

// 一時停止 / 再生
el.style.animationPlayState = 'paused';
el.style.animationPlayState = 'running';

// 終了イベント
el.addEventListener('animationend',   e => console.log('end',   e.animationName));
el.addEventListener('animationstart', e => console.log('start', e.animationName));
el.addEventListener('animationiteration', e => console.log('loop'));

関連

• アニメーション — 親カテゴリ
• transformプロパティ
• transition プロパティ
• @keyframes アットルール
• prefers-reduced-motion
• Web Animations API（JS 制御）