基礎準備
對于這個實現，我們需要一個簡單的 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 秒。
完成后，動畫反方向執行（反轉）。
無限次地運行動畫。
真棒，到目前為止。 離我們想要的已經很近了，但還不完美：
新聞熱點
疑難解答
