CSS3在動畫效果上著實不賴，今天我們就來學習一種文字消失動畫效果。

.fade-out {
animation-name: fadeOut;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
@keyframes fadeOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-20px);
}
}

代碼解析如下：

首先，我們給要使用該效果的元素加上一個類名“fade-out”。

然后，定義了一個名為“fadeOut”的關鍵幀動畫。我們從100％透明度開始，在2秒的持續時間內移動20px，直至達到0％的透明度。

最后，在“fade-out”類選擇器中，我們定義了將使用“fadeOut”動畫，動畫時間為2秒，緩動函數為“ease-out”。

此外，我們還使用“animation-fill-mode: forwards;”使元素停留在動畫結束位置，使其消失不會反彈回來。

感謝您的閱讀，希望這篇文章對您的學習有所幫助。