CSS隱藏顯示動畫是網頁設計中比較常見的效果之一，可以通過CSS的transition屬性來實現動畫效果，下面是一個簡單的示例：

/* CSS代碼 */
.box {
width: 100px;
height: 100px;
background-color: red;
transition: all 0.5s ease; /* 添加過渡效果 */
opacity: 1; /* 初始不透明度為1 */
}
.hide {
opacity: 0; /* 隱藏時透明度為0 */
height: 0;
padding: 0;
}
/* JavaScript代碼 */
document.querySelector('.btn').addEventListener('click', function() {
document.querySelector('.box').classList.toggle('hide');
});

在上面的示例中，頁面中有一個class為“box”的元素，在該元素上設置了過渡效果，初始不透明度為1，然后定義了一個名為“hide”的class，當該class被添加到該元素上時，透明度變為0，高度、內邊距等也都被改變，從而實現了一個隱藏的效果。最后，通過JavaScript監聽按鈕點擊事件，當點擊按鈕時，改變“box”的class，從而實現了一個隱藏顯示的動畫效果。

需要注意的是，transition屬性一般需要搭配使用其他屬性，如opacity、height、width等，才能達到比較理想的動畫效果，同時也需要注意兼容性的問題，有些瀏覽器對transition的支持不夠完善，需要考慮兼容性的處理。