CSS飛走動畫：如何用CSS制作一個飛走動畫？

/* 聲明一個對象 */
.flying-object{
position: absolute;
animation: flyout 3s forwards;
}
/* 定義動畫 */
@keyframes flyout{
0%{
left: 0;
}
100%{
left: 100%;
opacity: 0;
}
}

在上面的代碼中，我們首先聲明了一個名為“flying-object”的對象，將它的位置設置為絕對定位。然后通過CSS動畫屬性將一個名為“flyout”的動畫應用于它。這個動畫通過CSS提供的“@keyframes”關鍵幀規則定義。

在動畫中，我們將對象左側從0轉換到100%。這將把對象從頁面的左側飛出。我們還將對象的透明度設置為0，這將使對象在動畫結束時消失。

最后指定了一個“forwards”屬性，這將使對象保持其最終狀態（即消失）。

使用這些CSS，我們可以輕松地在網頁中添加一個漂亮的飛走動畫。