CSS顯隱動畫效果是網(wǎng)站或應(yīng)用中常用的效果之一，使頁面元素在顯示和隱藏時以動畫的方式呈現(xiàn)，增加了用戶體驗和美觀性。下面介紹幾種常用的CSS顯隱動畫效果。

1.透明度漸變效果

.hide {
opacity: 0;
transition: opacity 0.5s ease-out;
}
.show {
opacity: 1;
transition: opacity 0.5s ease-in;
}

上面的代碼中，使用opacity屬性控制元素的透明度，使用transition屬性實現(xiàn)動畫效果。當(dāng)元素的class為“hide”時，元素透明度為0，即隱藏狀態(tài)；當(dāng)class為“show”時，元素透明度為1，即顯示狀態(tài)。當(dāng)切換class時，會有0.5秒的漸變效果。

2.高度動畫效果

.hide {
height: 0;
transition: height 0.5s ease-out;
overflow: hidden;
}
.show {
height: auto;
transition: height 0.5s ease-in;
}

上面的代碼中，使用height屬性控制元素的高度，使用overflow屬性控制元素內(nèi)容溢出的部分是否隱藏。當(dāng)元素的class為“hide”時，元素高度為0，即隱藏狀態(tài)；當(dāng)class為“show”時，元素高度為自適應(yīng)高度，即顯示狀態(tài)。當(dāng)切換class時，會有0.5秒的高度變化動畫效果。

3.位移動畫效果

.hide {
transform: translateY(-100%);
transition: transform 0.5s ease-out;
}
.show {
transform: translateY(0%);
transition: transform 0.5s ease-in;
}

上面的代碼中，使用transform屬性控制元素的位移，使用translateY函數(shù)實現(xiàn)垂直方向上的位移。當(dāng)元素的class為“hide”時，元素向上移動100%，即隱藏狀態(tài)；當(dāng)class為“show”時，元素不偏移，即顯示狀態(tài)。當(dāng)切換class時，會有0.5秒的垂直位移動畫效果。

通過上述三種示例，我們可以看出，CSS顯隱動畫效果需要使用CSS的transition屬性，設(shè)置過渡的時間、動畫曲線和變化屬性。當(dāng)class名稱改變時，觸發(fā)動畫效果，從而達到元素顯隱動畫的效果。以上三種示例只是CSS顯隱動畫效果的部分示例，可以根據(jù)具體的需求和實現(xiàn)方式，靈活運用CSS屬性實現(xiàn)更多的動畫效果。