CSS動畫是現代Web設計中不可或缺的一部分，并且常常被用于為網頁增添一些互動性和創意性。在這篇文章中，我們將學習如何使用CSS動畫從上到下顯示。

首先，我們需要為動畫設置一個起始狀態和一個結束狀態。我們可以使用CSS屬性來定義它們，例如，使用“top”屬性來控制元素的位置。我們將元素的起始位置設置為屏幕外面，結束位置設置為屏幕內部。為此，我們可以使用以下代碼：

.animated-element {
position: absolute;
top: -100px;
animation: slide-in 1s forwards;
}
@keyframes slide-in {
100% {
top: 0;
}
}

這段代碼將使我們的元素在上方出現，并向下滑動到它的最終位置。我們設置了“position: absolute”以確保元素按照我們意圖進行動畫，而不會受到其他元素的影響。

接下來，我們需要定義動畫的細節。在這個例子中，我們使用了“animation”屬性來定義我們的動畫名稱、持續時間和動畫路徑。我們將持續時間設為1秒，并使用“forwards”關鍵字使元素在動畫結束時停留在最終狀態。

最后，我們使用了CSS的“@keyframes”規則來定義我們動畫的關鍵幀。我們將元素的位置從起始位置通過向下移動到結束位置。這里，在100%的關鍵幀中，我們將元素的位置屬性設為最終位置。

最后，我們對元素使用了“animated-element”CSS選擇器來為其應用我們的動畫效果。現在我們就可以在網頁上看到我們剛剛創建的動畫效果了！

CSS動畫從上到下顯示是一個簡單而有效的方式，可以使你的網頁看起來更加生動、有趣。使用這種方式，你可以使在頁面上的任何元素都有更多的互動性和創意性，為你的網頁增加視覺吸引力和用戶體驗。