CSS3在動(dòng)畫效果上著實(shí)不賴，今天我們就來學(xué)習(xí)一種文字消失動(dòng)畫效果。

.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);
}
}

代碼解析如下：

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

然后，定義了一個(gè)名為“fadeOut”的關(guān)鍵幀動(dòng)畫。我們從100％透明度開始，在2秒的持續(xù)時(shí)間內(nèi)移動(dòng)20px，直至達(dá)到0％的透明度。

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

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

感謝您的閱讀，希望這篇文章對(duì)您的學(xué)習(xí)有所幫助。