css動畫如何讓球彈跳

我現在正在學習CSS動畫，我想知道如何順利彈起球然後再次回落，此刻它順利上升，但一旦達到頂部並重新開始（反對再次下降）css動畫如何讓球彈跳

.football { 
background-image:url('football.png'); 
height:45px; 
width:45px; 
top:100%; 
left:40%; 
position:absolute; 
animation:football_up_down 1s linear infinite; 
} 

@keyframes football_up_down { 
100% { transform:rotate(360deg); top:30%; } 
0% { transform:rotate(180deg); top:100%} 

}

來源

2014-06-27 Adrian

動畫方向：備用; – Banana

謝謝你的工作:)如果你在CSS中添加'animation-direction：alternate'， – Adrian

正如他們在評論中已經說過，您可以添加animation-direction: alternate。

但是，您也可以添加50％的點作爲峯值點，然後100％點複製0％。總結先前關鍵幀的旋轉角度會增加對重複的更真實的影響。即：

@keyframes football_up_down { 
    0% { transform:rotate(180deg); top:100% } 
    50% { transform:rotate(360deg); top:30%; } 
    100% { transform:rotate(540deg); top:100% } 
}

工作示例：http://jsfiddle.net/w2mH8/

來源

2014-06-27 11:34:35

會更好。那麼你的答案是可以接受的。 –

你是什麼意思？我首先指出他可以使用它，但在這種情況下，他的動畫會反轉，如果球繼續朝相同的方向滾動，則會更加逼真。 –

首先你的DEMO不完全工作。這只是顯示代碼..我想幫助OP和幫助其他人，讓人們看到答案可以很容易地得到答案。 –

css動畫如何讓球彈跳

回答

相關問題