浮動動畫CSS是現代Web設計中的重要組成部分，它使我們能夠創建出吸引人的頁面效果和動畫。本文將介紹如何使用CSS創建浮動動畫效果。

.floatAnim {
position: relative;
animation: float 5s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}

首先，我們需要為元素創建一個class，這個class需要設置元素的position屬性為relative。接著，我們為這個class添加一個animation屬性，設置動畫名稱、時長、緩動函數以及動畫播放次數。

接下來，我們需要定義動畫的關鍵幀。在這個例子中，我們使用CSS的@keyframes規則來定義關鍵幀，然后指定動畫應該如何變化。在這個例子中，我們定義了三個關鍵幀：0%、50%和100%。在0%的時候，元素的transform屬性的translateY為0px。在50%的時候，元素的transform屬性的translateY為-20px，這使得元素在動畫的中間部分上升并減緩其上升的速度。最后，在100%的時候，元素恢復到原來的位置。

最后，我們只需要將我們定義好的class應用到我們需要播放浮動動畫的元素上。例如：

<div class="floatAnim">我是一個漂浮的元素</div>

如此簡單，我們就可以使用CSS創建浮動動畫效果了！