CSS出現時動畫效果非常流行，通常用于為網站添加一些炫酷的效果，吸引用戶的注意力。在實現這種效果時，我們需要使用CSS動畫，下面來看一些示例。

/*動畫1：從下向上滑動*/
.slide-up {
animation-name: slide-up;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
@keyframes slide-up {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}

上面的示例展示了一個從下向上滑動的動畫效果。在CSS中定義了一個".slide-up"類，指定了動畫效果的名稱、持續時間、時間函數和填充模式。然后使用CSS關鍵幀定義了動畫效果的開始和結束狀態。

/*動畫2：淡入效果*/
.fade-in {
animation-name: fade-in;
animation-duration: 2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

上面的示例展示了一個淡入效果。同樣地，使用CSS定義了一個".fade-in"類，指定了動畫效果的名稱、持續時間、時間函數和填充模式。然后使用CSS關鍵幀定義了動畫效果的開始和結束狀態。

CSS出現時動畫效果非常容易實現，只需要定義好類和動畫效果，然后將其應用到需要的元素上即可。這些動畫效果可以使網站更加生動有趣，同時也能提高用戶體驗。