CSS顯示隱藏動畫效果可以用來增強網頁的交互性和用戶體驗。使用CSS的transition屬性可以輕松實現展開和收起的動畫效果，可以應用在下拉菜單、折疊內容、滑動導航等方面。

/* 展開和收起動畫效果 */
.transition {
/* 設置高度為0，寬度為自適應 */
height: 0;
width: auto;
/* 設置過渡效果 */
transition: height 0.3s ease;
/* 點擊事件 */
cursor: pointer;
}
/* 鼠標懸停時的樣式 */
.transition:hover {
/* 設置背景顏色 */
background-color: #ddd;
}
/* 點擊時的樣式 */
.transition.active {
/* 設置高度為自適應 */
height: auto;
/* 添加經過的動畫時間 */
transition-duration: 0.5s;
}

上面的代碼中，我們創建了一個叫做transition的類，該類將設置一個高度為0的元素，并且擁有一些基本的過渡效果。當用戶懸停在元素上時，我們可以通過CSS改變它的背景顏色和光標形狀，讓用戶知道這是一個可點擊的區域。

當用戶點擊元素時，我們可以使用jQuery或者原生JavaScript來更改它的類名，以達到展開或收起的效果。當它展開時，我們可以添加一個名為“active”的類名，該類名將把高度設置為自適應，并在0.5秒內完成動畫。

總的來說，CSS顯示隱藏動畫效果是提高網頁交互性和用戶體驗的一個非常好的選擇。我們可以根據需要調整過渡時間、添加動畫效果，并通過JavaScript或jQuery來實現展開和收起的效果。