CSS是網頁設計中不可或缺的一部分。除了控制網頁的外觀和布局，CSS還可以讓元素有更加豐富的交互效果。今天，我們就來學習一個簡單的CSS屬性——從上掉下來。

/* 定義一個從上掉下來的動畫 */
@keyframes drop-down {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* 設置元素的動畫效果 */
.drop-down {
animation-name: drop-down;
animation-duration: 1s;
/* 設置動畫的播放次數 */
animation-iteration-count: 1;
}

代碼很簡單，首先使用@keyframes定義了一個從上掉下來的動畫，該動畫包含兩個關鍵幀，0%和100%。在0%的時候，元素的透明度為0，向上位移100%；在100%的時候，元素的透明度變為1，向下位移0%。接著，我們定義了一個.drop-down類，將動畫效果添加到元素中。這里我們設置了動畫的播放次數為1，即元素只會執行一次從上掉下來的動畫。

在實際開發中，我們可以將這個簡單的CSS屬性應用到多個場景中。比如，為網站的通知欄添加從上掉下來的動畫效果，讓用戶更加容易地注意到重要的信息；或者作為游戲中的特效動畫，營造出更加炫酷的氛圍。