アニメーションのプログラムの挙動の意味

質問

@charset "utf-8";

.box {
width: 80px;
height: 80px;
background: pink;
animation-name: move-around;
animation-duration: 4s;
animation-iteration-count: infinite;
}

ここから意味を知りたい。
@keyframes move-around {
25% {
transform: translate(100px, 0);

}

50% {
transform: translate(100px, 100px);
}

75% {
transform: translate(0, 100px);

}

}
ここまで

▢　→　▢
↑　　　　↓
▢　←　▢

このプログラムを実行すると。
四角がこのように移動するのですが
自分の考えていた命令文と違う気がするのですが
ご教示お願いしたいです、宜しくお願いします。
因みにドットインストールのアニメーション編の問題です。

回答No.4

AsarKingChang · ベストアンサー

>何か本当にこんな事にも中々気づけなくてすみませんでした。
いやいや、そこが一番楽しい時間じゃないかと＾＾
「あ～はいはい～」のタイミングが一番楽しいですよね＾＾
用は、移動方向を書いてるんじゃなくて移動完了後の位置を書いて、
そこにいつ行くか？4秒の4画＝1秒だよ～ってことだけ
気がつけば、それでよかっただけですね、。

ただ、デフォルトは、加速移動になってるので、
０，２５，５０，７５で止まったように見えるので。
気持ち悪いけど＾＾さっきのオプションでリニア加えれば、
普通のプログラム言語で書いたみたいな動きになりますんで～

んま、私でよければ＾＾また、聞いてくださいませませ。
では！さらばじゃ～（どういうキャラや、わし）

回答No.3

AsarKingChang

まず、画面は「左上」を原点としており、
そこが、0,0となり、右下に向かうにつれて
XとYが「増える」と考えてください。

>そもそも50%だの75%だのの位置関係が解りませんね。
ここは、位置ではなく時間です。
見えないですが、.boxの時点が0％で
25％、50％、75％の4個あるわけですが。
0％は移動していない状態とみなして0,0だと思ってください。

0％：0,0
25%：100px, 0
50%：100px, 100px
75%：0, 100px
と宣言しているので、

>75%?は左に移動するのだからX軸が-100移動しなくてはいけないのではと勘違いしています。

50%の位置からみたら確かにX-=100ですが、
そうではなく、「どこでもいい」ので、
75％の位置に来たら、0, 100pxの位置になれよ！
って書いてるのと同じです。
しかも、4秒÷4個のアニメ＝つまり、５０％～７５％までの
時間は「４÷４＝１秒」
なので、75％の時、どこにいるかわからんがとにかく
(0,100)の位置に来いよ！って事です。
「移動方向」のアニメじゃなくて、
「移動結果」をアニメとして
記載していると思えばOKかな～

お礼

回答ありがとうございます。
なるほど、つまりは、結果的には25%の位置に来たらとにかくx軸で右に100,50%の位置に来たら、右に100,下に100移動して
75%に来たら、下にだけ100という事になるのですね。
そして0%と100%は同じだから省いてもOKなんですよね。
(つまり戻るときは結果的に勝手に(0座標の元の位置に)戻るから-100はいらない)という事ですかね。

補足

あー、なるほどです。
ようやく解りました。
x軸y軸の動きで考えると、ｘが100yが100動くと真横に動きますが、yの100を省くと右下斜めに動くのですね。
だから細かく設定しなければいけないのですね。
何か本当にこんな事にも中々気づけなくてすみませんでした。

回答No.2

asciiz

ブラウザにおけるX軸は、右方向がプラスです。一般的な数学のグラフと一緒です。
しかし、Y軸は下方向がプラスとなっています。
数学のグラフとは上下が逆になる関係です。

ブラウザに表示される文字の流れを考えてもらうとわかりやすいと思います。
普通に書かれた文字は、左端から右に向かって伸びていきます。
そして改行すれば、下方向へ儲かって、2行目・3行目…と、下方向へ進んでいきます。

グラフィックス座標もそれに合わせてあるという訳です。

お礼

回答ありがとうございます。

回答No.1

AsarKingChang

>自分の考えていた命令文と違う気がするのですが
何と比較して、違うのかが、わからないので何ともですが。
一番最初 class=boxで、原点x=0,y=0の位置にいるわけですが。
アニメーションは” animation-duration: 4s;”合計で4秒あると宣言
その4秒の25%の位置で、x=100,y=0にいけ～
と書いてるわけで。残りも同じ。
75%までしかないのは、100%と0%は位置が同じだから、
0%の位置＝つまりx=0,y=0に移動せよという事。

綺麗にアニメがつながっていないような？
って意味の「違う気がする」なのであれば、
https://magazine.techacademy.jp/magazine/25592
これらで、確認できる通り、
"animation-timing-function"の
動き方のパラメーターをいじって。
animation-timing-function: linear;
などとすれば、C言語などで作ったかのような
「そのまんま」の動きになりますよ。

ただ、何と比較しての、違う気がする～
の雰囲気が、わからなかったので、
手当たり次第に？書いてみましたが。。
どんなもんでしょ。。

お礼

回答ありがとうございます。
オブジェクトが移動する際の位置関係がいまいち把握できないのです。
最初がX軸で右に100動くのは解るのですが・・・。
そもそも50%だの75%だのの位置関係が解りませんね。
75%?は左に移動するのだからX軸が-100移動しなくてはいけないのではと
勘違いしています。

補足

何度もすみません、本当に解りました、今度は大丈夫＾＾；
あれですね、つまりはその時点の位置で0,100pxの場所に移動しているって事ですよね。