CSS動(dòng)畫效果是網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)中非常重要的一部分，可以使網(wǎng)頁(yè)更加生動(dòng)、有趣，更加吸引人的目光。其中，淡入淡出是一種常用的動(dòng)畫效果，他們的操作非常簡(jiǎn)單，下面我們一起來(lái)學(xué)習(xí)！

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

我們可以看到，通過(guò)CSS實(shí)現(xiàn)淡入淡出只需要兩個(gè)關(guān)鍵幀。我們可以在一開始定義一個(gè)完全透明的狀態(tài)，即opacity:0，然后在后面設(shè)置為不透明的狀態(tài)，即opacity:1。同樣在淡出動(dòng)畫中，就是opacity前后值反轉(zhuǎn)。

接下來(lái)，我們可以將這些類應(yīng)用于我們想要使用動(dòng)畫的元素上，例如：

<div class="fade-in">
<h1>歡迎來(lái)到我們的網(wǎng)站！</h1>
<p>這是一段文字，我們將使用淡入效果展示它！</p>
</div>
<div class="fade-out">
<h1>再見！</h1>
<p>我們已經(jīng)離開這個(gè)網(wǎng)站。</p>
</div>

簡(jiǎn)單的CSS動(dòng)畫就是這么簡(jiǎn)單，沒(méi)有任何復(fù)雜的代碼或框架。如果你想學(xué)習(xí)更多的動(dòng)畫效果，可以查看animate.css等第三方動(dòng)畫庫(kù)，其中包含特別多的各種動(dòng)畫效果。