CSS上滑隱藏動畫是一種在網頁設計中非常常見的動畫效果。這種效果通常用來隱藏某些元素，比如滾動時的頂部導航條。以下是一個簡單的CSS代碼演示。

nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 9999;
transform: translateY(0);
transition: all 0.3s ease-in-out;
}
nav.hide {
transform: translateY(-100%);
}

在這個例子中，我們使用了一個nav元素作為頂部導航條。使用position:fixed讓它固定在頁面頂部，而使用transform:translateY()可以讓它在垂直方向上移動。在原始狀態下，它位于頂部，transform:translateY(0)沒有任何變化。當我們添加類名hide，使用transform:translateY(-100%)把它移到屏幕頂部之外，實現了上滑隱藏動效。

我們可以使用JavaScript來添加或刪除類名hide，以便根據滾動事件控制導航條的顯示或隱藏。下面是一個基本的JavaScript代碼示例：

var nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
if (window.scrollY >100) {
nav.classList.add('hide');
} else {
nav.classList.remove('hide');
}
}, false);

在這個例子中，我們選擇了文檔中的nav元素，并添加了一個滾動事件監聽器。當滾動頁面時，我們檢查當前垂直滾動的距離。如果大于100像素，我們添加hide類名，如果小于100像素，我們將其刪除。這樣，當用戶滾動頁面時，我們就可以控制導航條的顯示和隱藏。

總之，CSS上滑隱藏動畫是一種非常有用的設計技巧，可以增強用戶體驗，提高頁面美觀性。使用上述CSS和JavaScript代碼示例，你也可以輕松實現這種效果。