2021年8月16日解決済み

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

ユーザー
.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; と一緒に使うことを前提にしていますか?

スタッフ

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

プレミアムプランとは?