CSS開場動畫在現代網站設計中越來越流行。它可以給用戶帶來良好的視覺體驗，并幫助網站吸引更多的訪問者。下面就來看看如何設置CSS開場動畫。

/*設置CSS動畫名稱和持續時間*/
.myAnimation{
animation-name: myAnimation;
animation-duration: 3s;
}
/*設置關鍵幀*/
@keyframes myAnimation{
0%{
opacity: 0; /*動畫開始時完全透明*/
transform: translateY(-50px); /*向上移動50像素*/
}
100%{
opacity: 1; /*動畫結束時完全不透明*/
transform: translateY(0); /*不再移動*/
}
}

以上代碼定義了一個名為myAnimation的CSS動畫，持續時間為3秒。該動畫包括兩個關鍵幀：0%和100%。在0%關鍵幀，元素完全透明且向上移動50個像素，在100%關鍵幀，元素完全不透明且停止移動。您可以根據需要自己調整這些值。

接下來，將動畫應用到元素上：

<div class="myAnimation">
這是一個應用了開場動畫的元素
</div>

將類名myAnimation應用到任何元素上，如上例所示，該元素就會顯示一個向上移動并漸顯的動畫，這里是一個簡單的例子。使用CSS開場動畫不僅可以吸引用戶訪問您的網站，還可以使您的網站看起來更現代化和專業化。