ここでは、赤い四角形を上から下に向けてアニメーションを作成しているとします。 5秒後に四角形が一番下に落ちると、スクリプトは赤い四角形を一番上に戻してループを上からやり直すことができます。それは自然に見えません。CSSアニメーションループ - 前のループの最後から次のループを開始する
私が達成したいのは、動きが自然で滑らかに見えるように、下から上にスムーズに、次に上から下にスムーズに2番目のループを開始することです。言い換えれば、赤い四角は上から下に5秒ごとに跳ね返ります。助言がありますか？
私はあなたがそれを探していると思います。
お手伝いしますか？
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 3;
-webkit-animation-direction: alternate;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}
@-webkit-keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
50% {
background-color: green;
bottom: 0px;
top: 200px;
}
100% {
background-color: red;
bottom: 0px;
top: 0px;
}
}
@keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
50% {
background-color: green;
bottom: 0px;
top: 200px;
}
100% {
background-color: red;
bottom: 0px;
top: 0px;
}
}<div></div>おそらく 'animation-direction：alternate;'私は探していた。ありがとう、たくさんの友達！ –
シングルアニメーションループは完全なサイクル（トップ>ダウン、5S、ダウン>トップ、5S）を持っている必要があります。その後、ループで実行できます。 – mx0
より具体的に教えていただけますか？あなたがちょうど言ったことのダミーの例のように？ –
このサイトは別の方法で動作します。今まで試したコード（[MCVE]（https://stackoverflow.com/help/mcve））で質問を更新し、誰かがあなたを助けることができるかもしれません。 – mx0