画面幅に合わせて円が複数の円が水平に行き来するものを作りたいです。

https://lab.sonicmoov.com/markup/css/css-animati …
のサイトの1番目
クネクネ動く CSS loading
を元に

<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
background: #000000;
}

.container {
width: 200px;
height: 100px;
padding-top: 100px;
margin: 0 auto;
}

. ball {
width: 300px;
height: 300px;
margin: 10px auto;
border-radius: 50px;
animation: right 1.1s infinite ease-in-out;

.ball2 {
width: 300px;
height: 300px;
margin: 10px auto;
border-radius: 50px; 
animation: right 5s infinite ease-in-out;
}


@-webkit-keyframes right {
0% {
-webkit-transform: translate(-49vw);
}
50% {
-webkit-transform: translate(49vw);
}
100% {
-webkit-transform: translate(-49vw);
}
}

@-webkit-keyframes left {
0% {
-webkit-transform: translate(49vw);
}
50% {
-webkit-transform: translate(-49vw);
}
100% {
-webkit-transform: translate(49vw);
}
}

@-moz-keyframes right {
0% {
-moz-transform: translate(-49vw);
}
50% {
-moz-transform: translate(49vw);
}
100% {
-moz-transform: translate(-49vw);
}
}

@-moz-keyframes left {
0% {
-moz-transform: translate(49vw);
}
50% {
-moz-transform: translate(-49vw);
}
100% {
-moz-transform: translate(49vw);
}
}

@keyframes right {
0% {
transform: translate(-49vw);
}
50% {
transform: translate(49vw);
}
100% {
transform: translate(-49vw);
}
}

@keyframes left {
0% {
transform: translate(49vw);
}
50% {
transform: translate(-49vw);
}
100% {
transform: translate(49vw);
}
}
</style>
</head>
<body>
<div class="container">
<div class="ball"><div class="ball2"> </div></div>
</div>
</body>
</html>

と設定しました。
そうすると思うように動いてはくれたのですが、画面幅に収まらず動いてしまいます。
どのようにいじれば、どちらの玉も
画面幅に収まってくれますでしょうか？

Lhankor_Mhy

2020/04/10 04:22

「画面幅に収まらず動いてしまいます」というのは、両方ですか？

hanbag

2020/04/10 04:45

ご回答ありがとござます。はい、両方です。ですが、. ballは半分途切れる. ball2は全てが画面外へ出るといった感じです。

Lhankor_Mhy

2020/04/10 05:26 編集

ball2についてはballの中に入っているので、ballの動きに引きずられている、ということはご認識されていますか？また、これは一つのアニメーションルールで実現したい、ということでいいのでしょうか？

hanbag

2020/04/10 05:43

ご返信ありがとうございます。たしかにそうですね、同じ列で交差させて動かしたいのでball2をballの中に入れました。わけて、それぞれのballのクラスにポジション指定をして列を調整した方がいいのでしょうか？完成系は今の動きの状態で、画面幅になってくれることです。アニメーションルールに数の制限はありません。

Lhankor_Mhy

2020/04/10 05:45

ball2 を ball の外に出していいのですね。了解しました。

行動規範の内容に同意します

回答1件

ベストアンサー

こうでしょうか。

html
1<div class="container">
2<div class="ball"></div>
3<div class="ball2"></div>
4</div>

css
1@keyframes right {
20% {
3transform: translate(calc(-49vw + 300px / 2 - 50px));
4}
550% {
6transform: translate(calc(49vw - 300px / 2 - 50px));
7}
8100% {
9transform: translate(calc(-49vw + 300px / 2 - 50px));
10}
11}