animation-iteration-count: infinite; を書かないとうまく動作しないのは何故ですか?

infinite; を指定しない場合、初期値の 1 を指定していることになるためです。
2021年8月7日
ユーザー
.box{
  width: 100px;
  height: 100px;
  background: orange;

  animation-name: move;
  animation-duration: 1s;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    transform: none;
    animation-timing-function: linear;
  }
  80% {
    transform: translateX(200px) rotate(360deg);
  }
  100% {
    transform: translateX(300px) rotate(360deg);
  }
}

上記ではアニメーションが戻りませんでした。

animation-direction: alternate;はanimation-iteration-count: infinite; と一緒に使うことを前提にしていますか?

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(6)