CSS Keyframes 生成

4つのプリセット

フェードスライド

.animated {
  animation: fade-slide 0.6s ease both;
}

@keyframes fade-slide {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

要素が下からすべり上がりながらフェードインします。

パルス

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: .8; }
}

やわらかな脈動で、通知ドットやバッジに向きます。

スピン

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

1回転。ローダーやアイコンに便利です。

バウンス

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-24px); }
}

要素が跳ね上がって戻ります。

なぜ transform と opacity なのか

ブラウザは transform と opacity をレイアウト計算や再描画なしでGPU合成するため、アニメーションが滑らかに保たれます。プリセットはレイアウト計算を起こすプロパティを意図的に避けています。

animation の省略記法

animation: fade-slide 0.6s ease both; は「fade-slide という名前のアニメーション、0.6秒、デフォルトの ease イージング」という意味です。フィルモード both はアニメーション開始前に開始状態を適用し、終了後も終了状態を保つため、要素が開始前にチラついたり、動きのあと急に戻ったりしません。

命名のコツ

• CSS の慣習に合わせ kebab-case にします。
• 要素ではなく動きを表す名前を: alert-appear より fade-in-up が良いです。
• サードパーティのライブラリと衝突しそうな名前は避けましょう。

ブラウザ対応

@keyframes は普遍的な機能で、IE 10 以降のすべてのブラウザで動作します。