CSS顯示隱藏過渡動畫，可以通過設置transition屬性和visibility屬性來實現。

首先，定義一個CSS樣式，設置元素的隱藏狀態：

.hide {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}

其中，設置了visibility屬性為hidden，表示元素隱藏不可見，opacity屬性為0，表示透明度為0。

接著，定義另一個CSS樣式，設置元素的顯示狀態：

.show {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}

其中，設置了visibility屬性為visible，表示元素顯示可見，opacity屬性為1，表示透明度為1。

為了實現動畫效果，利用transition屬性來定義過渡時間和過渡函數。

最后，在HTML中定義一個元素，通過JavaScript來切換CSS樣式，以實現顯示隱藏過渡動畫效果：

<div id="element" class="hide"></div>
<script>
var element = document.getElementById("element");
element.classList.toggle("show");
</script>

通過切換CSS樣式，可實現元素的顯示隱藏過渡動畫效果。