animation-durationとanimation-nameが定義されている場合、アニメーションは自動的に再生を開始します。

アニメーションは最初のキーフレームで一時停止するように設定されています。

これは、animation-durationまたはanimation-nameのいずれも設定されていない場合とは異なります。アニメーションが一時停止されている場合、適用されるスタイルは最初のキーフレームのスタイルであり、デフォルトのスタイルではありません。

この例では、デフォルトでは四角形が表示されていますが、fadeAndMoveの最初のキーフレームでは、opacityが0に設定されています。一時停止すると、アニメーションはこの最初のキーフレームで「停止」し、したがって非表示になります。

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