CSS3動畫是一種讓網(wǎng)頁更加生動，活躍的方式，能夠增強用戶的體驗。其中，氣泡是一種非常受歡迎的動畫效果，下面我們就來學習一下如何制作CSS3動畫氣泡。

/* 創(chuàng)建氣泡的樣式 */
.bubble {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f44336;
animation: bubble 2s infinite ease-in-out;
}
/* 設(shè)置氣泡的動畫 */
@keyframes bubble {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}

首先，我們需要通過CSS樣式來創(chuàng)建一個氣泡。為了達到氣泡的效果，我們需要將元素設(shè)置為圓形，設(shè)置圓角半徑為50%。同時，為了讓氣泡有動畫效果，我們需要為元素設(shè)置一個animation屬性，并指定氣泡動畫的名稱、持續(xù)時間、以及無限播放（infinite）和動畫運行方式（ease-in-out）。

接下來，我們需要設(shè)置氣泡動畫。我們可以通過@keyframes來指定氣泡動畫的各個關(guān)鍵幀以及對應(yīng)的位置信息。在這個例子中，我們通過(transform: translateY())來設(shè)置氣泡的運動狀態(tài)，當氣泡從0%到50%的位置時，就會向上運動，并且向上移動至頂端；當氣泡從50%到100%的位置時，就會向下運動，最后回到原位。

通過以上代碼，我們就可以制作出一個簡單的氣泡動畫效果。記住在實際使用時，可以根據(jù)實際需要對氣泡進行進一步的樣式和動畫調(diào)整。