EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSSアニメーション

@keyframes

様々なポイントでスタイルを指定して、アニメーションシーケンスを定義：

サンプル

HTML 
<style>
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in {
  animation: slideIn 0.5s ease-out;
}
</style>
<div class="slide-in">左からスライドイン</div>
▶ 試してみよう

animationプロパティ

早見表

プロパティ 値 用途
animation-name @keyframes name アニメーション名
animation-duration 1s、500ms アニメーションの時間
animation-timing-function ease、linear、ease-in、ease-out 速度カーブ
animation-delay 0.5s、-1s 開始前の遅延
animation-iteration-count 1、2、infinite 再生回数
animation-direction normal、reverse、alternate 再生方向
animation-fill-mode none、forwards、backwards、both 前/後のスタイル

省略形

CSS 
.animation {
  animation: slideIn 0.5s ease-out 0.2s infinite alternate forwards;
  /* name duration timing-function delay iteration-count direction fill-mode */
}

よく使うアニメーション

フェードイン

サンプル

HTML 
<style>
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 1s ease-in;
}
</style>
<div class="fade-in">フェードインアニメーション</div>
▶ 試してみよう

バウンス

サンプル

HTML 
<style>
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.bounce {
  animation: bounce 1s infinite;
}
</style>
<div class="bounce">バウンスする要素</div>
▶ 試してみよう

ローディングスピナー

サンプル

HTML 
<style>
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
</style>
<div class="spinner"></div>
▶ 試してみよう

パフォーマンスのヒント

🔥 パフォーマンス警告： 一度に多くの要素をアニメーションさせないでください。20〜30の要素を同時にアニメーションさせると、ジャギーが発生します。will-changeを使用してブラウザにどの要素をアニメーションさせるかを伝えますが、乱用しないでください——will-change要素は追加のGPUメモリを消費します。

アニメーションに最適なプロパティ：

アニメーションを避けるべき：

❓ よくある質問

Q @keyframesとtransitionの違いは何ですか？
A transitionは「状態Aから状態B」の単純な変更のみを処理します。@keyframesは複数のキーフレーム（0%、50%、100%）を定義でき、複雑な多段階アニメーションが可能です。シンプルなホバーエフェクトにはtransitionを、複雑な自動再生エフェクトには@keyframesを使用します。
Q animation: infiniteはラグを引き起こしますか？
A 合理的な使用では問題ありません。しかし、一度に多くの要素をアニメーションさせないでください（20以下を推奨）。`will-change`を使用してブラウザにどの要素が変更されるかを伝え、GPUアクセラレーションを助けます。ページがフレーム落ちする場合は、アニメーション要素を減らすか、持続時間を短くしてください。
Q アニメーション後に要素がジャンプバック怎么办？
A `animation-fill-mode: forwards`を設定してください——アニメーション終了後に最後のフレームの状態を維持します。デフォルトは`none`で、開始位置に戻ります。

📖 まとめ

📝 演習

  1. 「バウンスボール」アニメーションを作成してください——ボールが落下し、跳ね返り、徐々に弱まります（多段階キーフレームを使用）。
  2. 「回転ローダー」を作成してください——リングが連続的に回転します（ヒント：border + border-top-color + border-radius + animation）。
  3. 「フェードインスライド」ページを作成してください：タイトルが上からスライド、段落が下から、画像が左から（異なるアニメーション）。
  4. 「呼吸光」ボタンを作成してください——ボタンの明るさがサイクルします。
100%