CSS3提供了豐富的動畫效果，包括淡入淡出，讓網頁變得更加生動有趣。本文介紹如何使用CSS3實現淡入后再淡出的動畫效果。

.fade-in{
opacity:0;
animation:fade-in 2s forwards;
}
@keyframes fade-in{
from{
opacity:0;
}
to{
opacity:1;
}
}
.fade-out{
opacity:1;
animation:fade-out 2s forwards;
}
@keyframes fade-out{
from{
opacity:1;
}
to{
opacity:0;
}
}

以上代碼定義了兩個類名，.fade-in用于淡入效果，.fade-out用于淡出效果。首先，給.fade-in一個opacity屬性，將其初始化為0，表示元素一開始處于透明狀態。然后，使用動畫關鍵字animation和fade-in兩個參數，控制元素從透明到不透明的漸變過程，動畫持續2秒，保持動畫結束狀態，即保持不透明。

接下來是.fade-out的代碼，和.fade-in的實現類似。首先給其一個opacity屬性，將其初始化為1，表示元素一開始是不透明的。然后使用動畫關鍵字animation和fade-out兩個參數，控制元素從完全不透明到透明的漸變過程，動畫持續2秒，保持動畫結束狀態，即保持透明。

有了以上兩個類名，我們就可以在文檔中使用它們了。例如，要給一個元素添加淡入淡出效果，只需要在class屬性中添加.fade-in和.fade-out即可：

<div class="fade-in fade-out">這是一個淡入淡出的元素</div>

以上代碼會為指定的div元素添加淡入和淡出效果，讓元素從透明到不透明，再從不透明到透明，形成一種生動有趣的動畫效果。

總之，CSS3提供了豐富的動畫效果，使我們在設計網頁時更加靈活，能夠更好地展現出自己的想法。淡入淡出動畫是其中的一種經典效果，可以通過class類名的方式輕松實現，讓網頁變得更加生動有趣。