CSS動畫能夠為網頁元素帶來生動的效果，其中由隱藏到顯示（或相反）的動畫效果常常被運用。以下是一個由隱藏到顯示的動畫示例：

/* 設置元素初始狀態 */
.element {
opacity: 0;
visibility: hidden;
}
/* 設置動畫效果 */
.element.animate {
animation: fadeIn 1s ease-in-out forwards;
}
/* 定義動畫 */
@keyframes fadeIn {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}

首先，通過CSS選取需要應用動畫的元素（此處用.element表示），并設置元素的初始狀態。在此示例中，元素被設置為不可見（opacity: 0和visibility: hidden）。

接著，通過為元素添加一個class（此處用.animate表示）來觸發動畫效果。通過為元素的animation屬性指定動畫名（同時設定持續時間、緩動函數、以及效果結束后元素仍停留在當前狀態等屬性），設置動畫的初始狀態和結束狀態。

最后，通過@keyframes定義動畫效果。在此處，定義了一個fadeIn動畫，由opacity和visibility屬性從0到1過渡。將動畫效果從初始狀態漸進到結束狀態，達到由隱藏到顯示的效果。

此處代碼僅是示例，實際應用中，可根據需求進行調整和修改。通過掌握CSS動畫的原理和應用，可以為網頁增添生動的效果，提升展示和交互體驗。