使用CSS3怎么創(chuàng)建網(wǎng)頁動畫？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
為昂仁等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及昂仁網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計制作、網(wǎng)站建設(shè)、昂仁網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
基礎(chǔ)準備
對于這個實現(xiàn)，我們需要一個簡單的 div ，并且樣式類名為 ball ：
HTML 代碼:
我們將使用 Flexbox 布局，把球放到頁面中間，尺寸為 100px * 100px，背景色為橘黃色。
CSS 代碼:
重慶分公司
重慶分公司
body {
display: flex; /* 使用Flex布局 */
justify-content: center; /* 水平居中 */
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%; /* 把正方形變成圓形*/
background-color: #FF5722; /* 設(shè)置顏色為橙色*/
}創(chuàng)建 Keyframe(關(guān)鍵幀)
Keyframe(關(guān)鍵幀) 用于 CSS 動畫，以便我們完全控制動畫。創(chuàng)建 Keyframe(關(guān)鍵幀) 的樣式非常簡單。我們使用關(guān)鍵字 @keyframes ，在后面跟動畫名稱：
CSS 代碼:
@keyframes nameOfAnimation {
/* 代碼 */
}在這個示例中，我們把 keyframe(關(guān)鍵幀) 取名為 bounce。在 Keyframe 中，用 from 和 to 關(guān)鍵字來指定動畫開始點和結(jié)尾點的 CSS 樣式。
CSS 代碼:
@keyframes bounce {
from { /* 開始 */ }
to { /* 結(jié)束 */ }
}很簡單是不是？ 最后一步，我們可以添加我們的開始點和結(jié)尾點的 CSS 樣式。為了創(chuàng)建反彈效果，我們將只是改變球的位置。transform 允許我們修改給定元素的坐標。以下是最終的 keyframe(關(guān)鍵幀) ：
CSS 代碼:
@keyframes bounce {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, 200px, 0); }
}我們使用 transform 讓球沿著三維軸平移，translate3D 函數(shù)需要 3 個輸入?yún)?shù)，即 (x, y, z) 。 因為我們想讓球上下跳動，我們只需要沿著 y 軸進行平移。因此，動畫結(jié)束點（即 to 中樣式）的 y 值變成了 200px 。
運行 Keyframe(關(guān)鍵幀)
現(xiàn)在 @keyframe 已經(jīng)創(chuàng)建了，是時候讓它運行起來了！回到 .ball{} css 并添加以下行代碼：
CSS 代碼:
.ball {
/* ... */
animation: bounce 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}解釋一下這三行代碼:
告訴 ball 元素使用我們的 keyframe(關(guān)鍵幀) 規(guī)則反彈。 設(shè)置完成動畫的時間長度為 .5 秒。
完成后，動畫反方向執(zhí)行（反轉(zhuǎn)）。
無限次地運行動畫。
真棒，到目前為止。 離我們想要的已經(jīng)很近了，但還不完美：
它看起來不像一個彈跳的球。那是因為我們沒有為動畫設(shè)置速度曲線，默認會被設(shè)置為 ease。意思是動畫的速度剛開始慢，中間變快，快結(jié)束的時候又變慢。不幸的是，這不是一個彈跳球的理想選擇。幸運的是，我們可以使用 Math 來定制這個 速度曲線！
進入太多的細節(jié)，你可以使用 bezier(貝塞爾曲線) 來指定自定義動畫時間。以下是附加的代碼：
CSS 代碼:
.ball {
/* ... */
animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5);
}看完上述內(nèi)容，你們掌握使用CSS3怎么創(chuàng)建網(wǎng)頁動畫的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
