新！我的 44 頁電子書「44 分鐘學會 CSS」出爐囉！😃

立即取得 →

#animation-name

定義要使用哪一個動畫關鍵影格。

預設值 animation-name: none;

如果未指定動畫名稱，則不會播放任何動畫。

animation-name: fadeIn;

如果指定名稱，則會使用與該名稱相符的關鍵影格。

例如，fadeIn 動畫如下所示

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

animation-name: moveRight;

另一個範例：moveRight 動畫

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}