CSS3 fade 動畫是一種常用的網(wǎng)頁動畫效果。它可以使元素從透明度為 0 到透明度為 1 淡入視圖中，或從透明度為 1 到透明度為 0 淡出視圖。

/* 淡入動畫 */
.fadeIn{
opacity: 0; /* 初始透明度為 0 */
animation: fadeIn 1s ease-in forwards; /* 動畫時(shí)間為 1s，使用 ease-in 緩動函數(shù)，最終保持 opacity 為 1 */
}
@keyframes fadeIn{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
/* 淡出動畫 */
.fadeOut{
animation: fadeOut 1s ease-in forwards; /* 動畫時(shí)間為 1s，使用 ease-in 緩動函數(shù)，最終保持 opacity 為 0 */
}
@keyframes fadeOut{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}

需要注意的是，上面的fadeIn和fadeOut動畫只是簡單地修改了元素的透明度。如果想要在動畫過程中改變其他樣式，需要在對應(yīng)的 keyframes 中設(shè)置。例如：

@keyframes fadeIn{
0%{
opacity: 0;
transform: translateY(-10px); /* 初始位置為上方 10px */
}
100%{
opacity: 1;
transform: translateY(0); /* 最終位置為 top: 0 */
}
}

以上代碼將元素的透明度和位置同時(shí)修改。其中translateY(-10px)表示相對于當(dāng)前位置向上移動 10px，而translateY(0)則表示在頂部停止。