css如何實現彈跳球動畫效果？本篇文章給大家透過程式碼範例介紹css是如何實現彈跳球動畫效果的。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
1、定義動畫關鍵影格
對於這個動畫，我們將使用兩個關鍵影格- 一個用恆定速度水平平移球，另一個用於應用大致拋物線垂直彈跳運動。可以將水平和垂直平移組合成一個關鍵幀，但這對我們所追求的效果不起作用。
使用以下關鍵幀可以輕鬆實現水平運動：
@-webkit-keyframes travel {
from { }
to { left: 640px; }
}
@keyframes travel {
from { }
to { left: 640px; }
}稍後將使用指定的名稱“travel”引用此關鍵幀，並使用linear（轉換計時函數）來應用該關鍵幀，函數隨每次迭代更改方向。
對於垂直彈跳，動畫，我們要利用的易用性在和漸出定時功能來模擬重力場的影響：
@-webkit-keyframes bounce {
from, to {
bottom: 0;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 220px;
-webkit-animation-timing-function: ease-in;
}
}
@keyframes bounce {
from, to {
botttom: 0;
animation-timing-function: ease-out;
}
50% {
bottom: 220px;
animation-timing-function: ease-in;
}
}該關鍵幀已被命名為“bounce”以供日後參考。
組合這兩個關鍵影格將使我們的'球'水平移動640像素，垂直移動220像素。當然，這些值需要調整以適應“舞台”的大小。
2、設定動畫的舞台
與往常一樣，我們首先設定一個“舞台”，在其中執行動畫。在這種情況下，一個尺寸為660 x 240像素的簡單DIV。讓寬度為100％會很好，但是在不知道確切像素寬度的情況下放置一些元素是很困難的。
#stage {
position: relative;
margin: 1em auto;
width: 660px;
height: 240px;
border: 2px solid #666;
background: #cff;
}在這個階段，我們將設定一個水平來回移動的DIV元素，並在其中表示上下反彈的「球」的DIV：
#traveler {
position: absolute;
width: 20px;
height: 240px;
-webkit-animation-name: travel;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 4.8s;
animation-name: travel;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 4.8s;
}
#bouncer {
position: absolute;
width: 20px;
height: 20px;
background: red;
border-radius: 10px;
-webkit-animation-name: bounce;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 4.2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-duration: 4.2s;
}所以'球'的尺寸為20 x 20像素，圓角。
3、設定球運動
我們完成了一些簡單的HTML標記：
<div id="stage">
<div id="traveler">
<div id="bouncer"><!-- --></div>
</div>
</div>如果您的瀏覽器支援它，動畫將自動啟動並在下面的框（或#stage）中無限期地繼續：
我們加入了一個額外的元素和一些樣式來突出動畫的x和y分量，不需要JavaScript，其他程式碼完全如所示。
CSS：bounce-animation.css（https://www.the-art-of-web.com/bounce-animation.css）
#大功告成！
總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。
以上是css如何實現彈跳球動畫效果？現彈跳球動畫的實作範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
