CSS3是一種強大的網頁設計語言，它提供了許多有趣的動畫效果。其中，淡入淡出動畫可能是最受歡迎的一種，它可以在頁面元素出現和消失時產生流暢自然的過渡。下面就來看看如何使用CSS3實現淡入淡出動畫。

/* 淡入動畫*/
.fade-in {
opacity:0; /* 先將元素透明度設為0 */
animation: fadeIn ease-in 1; /* 設置動畫 */
animation-fill-mode: forwards; /* 保持結束后狀態 */
animation-duration: 1s; /* 動畫時長為1秒 */
}
@keyframes fadeIn {
0% {opacity:0;} /* 元素從透明度0開始 */
100% {opacity:1;} /* 元素透明度變為1，即完全顯示 */
}
/* 淡出動畫 */
.fade-out {
opacity:1; /* 先將元素透明度設為1 */
animation: fadeOut ease-in 1; /* 設置動畫 */
animation-fill-mode: forwards; /* 保持結束后狀態 */
animation-duration: 1s; /* 動畫時長為1秒 */
}
@keyframes fadeOut {
0% {opacity:1;} /* 元素透明度為1，即完全顯示 */
100% {opacity:0;} /* 元素透明度變為0，即完全消失 */
}

如上代碼，我們定義了兩個類名——.fade-in和.fade-out，分別對應淡入和淡出動畫。其中，opacity屬性控制元素透明度，animation屬性控制動畫，animation-fill-mode屬性則保持動畫結束后的狀態不變。

至于animation屬性中，我們定義了一個@keyframes關鍵詞，用于指定動畫效果的細節，包括起始狀態和結束狀態。由于淡入和淡出效果是顛倒的，所以兩個@keyframes的定義也互相顛倒了一下。

最后，將定義好的類名應用到需要淡入淡出的頁面元素上，即可實現效果。

CSS3淡入淡出動畫是網頁設計中經常使用的一個效果，運用它可以讓頁面交互更豐富、更流暢。掌握了這種動畫的實現方法，相信在網頁設計中會更加得心應手。