CSS實現(xiàn)淡入淡出效果

在CSS中，我們可以使用transition屬性來實現(xiàn)淡入淡出效果，我們需要定義兩個關鍵幀，分別代表元素從透明到不透明（淡入）和不透明到透明（淡出）的過程。

下面是一個簡單的例子，展示了如何使用CSS實現(xiàn)淡入淡出效果：

1、定義關鍵幀：

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

2、應用動畫：

.fadeInElement {
  animation: fadeIn 2s; /* 淡入動畫，持續(xù)2秒 */
}
.fadeOutElement {
  animation: fadeOut 2s; /* 淡出動畫，持續(xù)2秒 */
}

3、在HTML中應用樣式：

<div class="fadeInElement">這是淡入元素</div>
<div class="fadeOutElement">這是淡出元素</div>

在這個例子中，fadeInElement類的元素會在2秒內(nèi)從透明變?yōu)椴煌该?，?code>fadeOutElement類的元素則會在2秒內(nèi)從不透明變?yōu)橥该?，我們可以根?jù)需要調(diào)整動畫的持續(xù)時間和延遲時間。