@keyframes

アニメーション・エフェクト

アニメーションの各段階を定義するルールです。

構文

Syntax

@keyframes <name> { <keyframe-selector> { <declarations> } }

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

実行結果

左からスライドイン

左からスライドインするアニメーション

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

実行結果

脈動アニメーション

脈動するアニメーション

fromとtoは0%と100%の省略形。複数のプロパティを同時にアニメーション可能。

IE10+, 全モダンブラウザ