anime_html/css_WEB-ITnoseを定義する@keyframesの問題について

長方形を最初に 30 度回転し、次に右に 200 ピクセル移動し、次に 330 度回転して、最後に元の位置に戻りたいと考えています。 (コードは互換性を考慮していません)

div
{
背景色; : 赤;
幅: 120 ピクセル;
高さ: 50 ピクセル;
アニメーション タイミング関数: リニア;
@キーフレーム

0% {幅:120px;高さ:50px;左:0px; トップ:0px;}
25% {transform:rotate(30deg);}
50% {左:200px; ; }
75% {transform:rotate(330deg);}
100% {left:0px; top:0px;}

;

代わりに、30 度回転して右に歩きます、330度回転し、同時に戻ります。理由を聞いてもいいですか？
要件を満たすための正しいコードを記述するにはどうすればよいですか?

ディスカッション (解決策) への返信

@keyframes東華

{

0% {幅:120px;高さ:50px;left:0px; top:0px;} 25% {transform:rotate(30deg);left:0px;} 50 % {transform:rotate(30deg);left:200px; top:0px;} 75% {transform:rotate(330deg);left:200px;}
100% {transform:rotate(330deg);left :0px; top:0px;}

}

あなたの書いたものが好きですご存知のとおり、25% で left:0px; と定義すると、右には移動しません。しかし、まだ非常に奇妙です、 left:0px; を定義していないのに、なぜ同時に右に移動しますか？

@keyframes donghua{ 0%  {width:120px;height:50px;left:0px; top:0px;} 25% {transform:rotate(30deg);left:0px;} 50% {transform:rotate(30deg);left:200px; top:0px;} 75% {transform:rotate(360deg);left:200px;}100% {transform:rotate(360deg);left:0px; top:0px;}}

@keyframes donghua{ 0%  {width:120px;height:50px;left:0px; top:0px;} 25% {transform:rotate(30deg);left:0px;} 50% {transform:rotate(30deg);left:200px; top:0px;} 75% {transform:rotate(360deg);left:200px;}100% {transform:rotate(360deg);left:0px; top:0px;}}

左:0px の 25% で定義します。しかし、まだ非常に奇妙です、 left:0px; を定義していないのに、なぜ同時に右に移動しますか？

@keyframes は複数の属性を同時にアニメーション化できます。各属性の変更は独立しています。

必要なのは、タイムラインが 25% から 50% のときに左側が 0 から 200 に変化することです。

@keyframes donghua{ 0%  {width:120px;height:50px;left:0px; top:0px;} 25% {transform:rotate(30deg);left:0px;} 50% {transform:rotate(30deg);left:200px; top:0px;} 75% {transform:rotate(360deg);left:200px;}100% {transform:rotate(360deg);left:0px; top:0px;}}

ただし、左側を 0% に設定するだけです。 :0px;、50% は left:200px を設定します。
25% は left 属性を設定しません。つまり、25% の左側には影響しません。
これは、タイムラインが 0% から 50% までのときに、左側が 0 から 200 に変化することを意味します。