CSS3 建立簡單的網頁動畫 – 實現彈跳球動
基礎準備
對於這個實現，我們需要一個簡單的 div ，並且樣式類名為 ball ：
HTML 程式碼:
<div class="ball"></div>
我們將使用 Flexbox 佈局，把球放到頁面中間，尺寸為 100px * 100px，背景色為橘黃色。
CSS 程式碼:
body {
display: flex;/* 使用Flex佈局 */
justify-content: center;/* 水平居中 */
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%;/* 把正方形變成圓形*/
background-color: #FF5722;/* 設定顏色為橙色*/
}
建立 Keyframe(關鍵幀)
Keyframe(關鍵幀) 用於 CSS 動畫，以便我們完全控制動畫。建立 Keyframe(關鍵幀) 的樣式非常簡單。我們使用關鍵字 @keyframes ，在後面跟動畫名稱：
CSS 程式碼:
@keyframes nameOfAnimation {
/* 程式碼 */
}
在這個示例中，我們把 keyframe(關鍵幀) 取名為 bounce。在 Keyframe 中，用 from 和 to 關鍵字來指定動畫開始點和結尾點的 CSS 樣式。
CSS 程式碼:
@keyframes bounce {
from { /* 開始 */ }
to{ /* 結束*/ }
}
很簡單是不是？ 最後一步，我們可以新增我們的開始點和結尾點的 CSS 樣式。為了建立反彈效果，我們將只是改變球的位置。transform 允許我們修改給定元素的座標。以下是最終的 keyframe(關鍵幀) ：
CSS 程式碼:
@keyframes bounce {
from { transform: translate3d(0, 0, 0);}
to{ transform: translate3d(0, 200px, 0); }
}
我們使用 transform 讓球沿著三維軸平移，translate3D 函式需要 3 個輸入引數，即 (x, y, z) 。 因為我們想讓球上下跳動，我們只需要沿著 y 軸進行平移。因此，動畫結束點（即 to 中樣式）的 y 值變成了 200px 。
執行 Keyframe(關鍵幀)
現在 @keyframe 已經建立了，是時候讓它執行起來了！回到 .ball{} css 並新增以下行程式碼：
CSS 程式碼:
.ball {
/* ... */
animation: bounce 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
解釋一下這三行程式碼:
告訴 ball 元素使用我們的 keyframe(關鍵幀) 規則反彈。 設定完成動畫的時間長度為 .5 秒。
完成後，動畫反方向執行（反轉）。
無限次地執行動畫。
真棒，到目前為止。 離我們想要的已經很近了，但還不完美：
它看起來不像一個彈跳的球。那是因為我們沒有為動畫設定速度曲線，預設會被設定為 ease。意思是動畫的速度剛開始慢，中間變快，快結束的時候又變慢。不幸的是，這不是一個彈跳球的理想選擇。幸運的是，我們可以使用 Math 來定製這個 速度曲線！
進入太多的細節，你可以使用 bezier(貝塞爾曲線) 來指定自定義動畫時間。以下是附加的程式碼：
CSS 程式碼:
.ball {
/* ... */
animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5);
}
當然這是用 CSS Animations(動畫) 和 Keyframes(關鍵幀) 建立的最簡單的動畫效果.
這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。