CSS3中，我們可以輕松地為網頁添加各種動畫效果。其中，從上向下閃入的效果是一種非常常見的動畫，下面我們來學習一下如何實現這種效果。

/*定義一個class為animate-top的動畫*/
.animate-top {
animation-name: animateTop; /*動畫名稱*/
animation-duration: 1s; /*動畫持續時間*/
animation-timing-function: ease-out; /*動畫時間函數*/
visibility: visible !important; /*可見，重要性比之前的visibility高*/
}
@keyframes animateTop {
from {
transform: translateY(-100%); /*從上面移動100%*/
}
to {
transform: translateY(0); /*移動到原位置*/
}
}

在上面的代碼中，我們定義了一個class為animate-top的動畫，并通過@keyframes規則定義了動畫的具體實現。

接下來，在HTML代碼中，我們只需要為需要使用此動畫的元素添加這個類名即可：

這是一個使用animate-top動畫的盒子！

通過上述代碼，我們就實現了一個從上閃入的動畫效果。