100%でさらに360度回転しないのはなぜですか?

キーフレームで指定しているのは、アニメーション開始前の状態と比較してどうなっているか、だからです。
2020年8月3日
ユーザー

こんにちは。
今回のようにコードを書いた場合以下のようになります。

>80%のときは、X方向に200px移動したあと、360度回転し、
>100%のときは、X方向に300px移動したあと、360度回転したまま。(直進)

なぜ、100%のときは、さらに360度回転しないのでしょうか。

  0% {
    transform: none;
  }
  80% {
    transform: translateX(200px) rotate(360deg);
  }
  100% {
    transform: translateX(300px) rotate(360deg);
  }

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

プレミアムプランとは?

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