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

1.透明度漸變效果

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

上面的代碼中，使用opacity屬性控制元素的透明度，使用transition屬性實現動畫效果。當元素的class為“hide”時，元素透明度為0，即隱藏狀態；當class為“show”時，元素透明度為1，即顯示狀態。當切換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屬性控制元素內容溢出的部分是否隱藏。當元素的class為“hide”時，元素高度為0，即隱藏狀態；當class為“show”時，元素高度為自適應高度，即顯示狀態。當切換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函數實現垂直方向上的位移。當元素的class為“hide”時，元素向上移動100%，即隱藏狀態；當class為“show”時，元素不偏移，即顯示狀態。當切換class時，會有0.5秒的垂直位移動畫效果。

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