CSS動畫循環 - 下一個循環應該從前一個循環開始

Question

假設我有從頂部到底部帶來紅色方塊的動畫 - 每5秒發生一次。一旦方格在5秒後下降到最低點，腳本會將我們的紅色方塊傳回到頂部，這樣循環可以從頂部重新開始。事情看起來並不自然。

我想要實現的是從底部到頂部順利地開始第二個循環，然後再從頂部到底部等，使運動看起來自然而平滑。換句話說 - 紅色方塊會每5秒從上到下反彈。有什麼建議麼？

Answer 1

我認爲你正在尋找。

可能會幫助你。

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>