通過這個有趣的教程學習 CSS Animations(動畫) 和 Keyframes(關鍵幀)。

我們要做什么？

下面是最終代碼，也就是我們將要最終實現的演示：

基礎準備

對于這個實現，我們需要一個簡單的 div ，并且樣式類名為 ball ：

我們將使用 Flexbox 布局，把球放到頁面中間，尺寸為 100px * 100px，背景色為橘黃色。

body {

display: flex; /* 使用Flex布局 */

justify-content: center; /* 水平居中 */

}

.ball {

width: 100px;

height: 100px;

border-radius: 50%; /* 把正方形變成圓形*/

background-color: #FF5722; /* 設置顏色為橙色*/

}

創建 Keyframe(關鍵幀)

Keyframe(關鍵幀) 用于 CSS 動畫，以便我們完全控制動畫。創建 Keyframe(關鍵幀) 的樣式非常簡單。我們使用關鍵字 @keyframes，在后面跟動畫名稱：

@keyframes nameOfAnimation {

/* 代碼 */

}

在這個示例中，我們把 keyframe(關鍵幀) 取名為 bounce。在 Keyframe 中，用 from 和 to 關鍵字來指定動畫開始點和結尾點的 CSS 樣式。

@keyframes bounce {

from { /* 開始 */ }

to { /* 結束 */ }

}

很簡單是不是？ 最后一步，我們可以添加我們的開始點和結尾點的 CSS 樣式。為了創建反彈效果，我們將只是改變球的位置。transform 允許我們修改給定元素的坐標。以下是最終的 keyframe(關鍵幀) ：

@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 并添加以下行代碼：

.ball {

/* ... */

animation: bounce 0.5s;

animation-direction: alternate;

animation-iteration-count: infinite;

}

解釋一下這三行代碼:

告訴 ball 元素使用我們的 keyframe(關鍵幀) 規則反彈。 設置完成動畫的時間長度為 .5 秒。

完成后，動畫反方向執行(反轉)。

無限次地運行動畫。

真棒，到目前為止。 離我們想要的已經很近了，但還不完美：

它看起來不像一個彈跳的球。那是因為我們沒有為動畫設置速度曲線，默認會被設置為 ease。意思是動畫的速度剛開始慢，中間變快，快結束的時候又變慢。不幸的是，這不是一個彈跳球的理想選擇。幸運的是，我們可以使用 Math 來定制這個 速度曲線！

進入太多的細節，你可以使用 bezier(貝塞爾曲線) 來指定自定義動畫時間。以下是附加的代碼：

.ball {

/* ... */

animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5);

}

您可以使用這個網站來找到合適的速度曲線。 這里用數字創建一個(慢，慢，慢，快)的曲線 – 這正是我們想要創建的彈跳效果。

這是最終代碼(包括用于最終瀏覽器支持的 webkit 前綴)：

當然這是用 CSS Animations(動畫) 和 Keyframes(關鍵幀) 創建的最簡單的動畫效果，后面會有更多關于網頁動畫的教程，敬請關注。

總結

以上是生活随笔為你收集整理的html如何创建关键帧动画旋转,[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。