小編給大家分享一下css怎么實現(xiàn)彈跳球動畫效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

目前創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管運營、企業(yè)網(wǎng)站設(shè)計、漣水網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

1、定義動畫關(guān)鍵幀

對于這個動畫，我們將使用兩個關(guān)鍵幀-一個用恒定速度水平平移球，另一個用于應(yīng)用大致拋物線垂直彈跳運動?？梢詫⑺胶痛怪逼揭平M合成一個關(guān)鍵幀，但這對我們所追求的效果不起作用。

使用以下關(guān)鍵幀可以輕松實現(xiàn)水平運動：

@-webkit-keyframestravel{

from{}

to{left:640px;}

}

@keyframestravel{

from{}

to{left:640px;}

}

稍后將使用指定的名稱“travel”引用此關(guān)鍵幀，并使用linear（轉(zhuǎn)換計時函數(shù)）來應(yīng)用該關(guān)鍵幀，該函數(shù)隨每次迭代更改方向。

對于垂直彈跳，動畫，我們要利用的易用性在和漸出定時功能來模擬重力場的影響：

@-webkit-keyframesbounce{

from,to{

bottom:0;

-webkit-animation-timing-function:ease-out;

}

50%{

bottom:220px;

-webkit-animation-timing-function:ease-in;

}

}

@keyframesbounce{

from,to{

botttom:0;

animation-timing-function:ease-out;

}

50%{

bottom:220px;

animation-timing-function:ease-in;

}

}

該關(guān)鍵幀已被命名為“bounce”以供將來參考。

組合這兩個關(guān)鍵幀將使我們的'球'水平移動640像素，垂直移動220像素。當(dāng)然，這些值需要調(diào)整以適應(yīng)“舞臺”的大小。

2、設(shè)置動畫的舞臺

與往常一樣，我們首先設(shè)置一個“舞臺”，在其中執(zhí)行動畫。在這種情況下，一個尺寸為660x240像素的簡單DIV。讓寬度為100％會很好，但是在不知道確切像素寬度的情況下放置一些元素是很困難的。

#stage{

position:relative;

margin:1emauto;

width:660px;

height:240px;

border:2pxsolid#666;

background:#cff;

}

在這個階段，我們將設(shè)置一個水平來回移動的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;

}

所以'球'的尺寸為20x20像素，圓角。

3、設(shè)置球運動

我們完成了一些簡單的HTML標(biāo)記：