在網頁設計中，動畫是不可避免的元素之一，而 CSS 是實現動畫的重要工具。盡管大多數動畫都是由用戶的交互操作（例如鼠標點擊、懸停等）來觸發的，但是有些情況下，我們需要在刷新頁面時觸發動畫，以提高用戶體驗和頁面的視覺吸引力。那么如何在 CSS 中實現頁面刷新時觸發動畫呢？ 首先，我們需要了解關于頁面刷新的一些基礎知識。當我們在瀏覽器中刷新頁面時，瀏覽器會重新加載整個頁面的內容和樣式。因此，在頁面刷新時，我們可以通過 CSS 規則來修改頁面的顯示方式，例如將頁面背景顏色設置為一個過渡效果或者讓頁面元素以緩慢的方式淡出。而要實現這些效果，我們可以通過以下代碼來完成：

body {
background-color: #000;
animation: changeBg 2s;
}
@keyframes changeBg {
from {
background-color: #fff;
}
to {
background-color: #000;
}
}

上述代碼的意思是，在頁面初始加載時，背景顏色為 #fff。當用戶刷新頁面時，背景顏色將從 #fff 緩慢地變為 #000，動畫時間為 2 秒。 當頁面中存在多個元素需要實現動畫效果時，我們也可以通過給他們設置相應的 CSS 屬性來實現。 例如，在下面的代碼中，我們將兩個 div 分別設置為 50% 的寬度，同時使它們以一定的速度從屏幕外滑動到屏幕內：

div {
width: 50%;
animation: slideIn 2s;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}

以上代碼將 div 從屏幕左側滑入。如果我們想要從屏幕頂部開始滑動，可以修改動畫屬性為：

div {
width: 50%;
animation: slideIn 2s;
animation-delay: 0.5s;
}
@keyframes slideIn {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0%);
}
}

上述代碼中，我們增加了 animation-delay 屬性，將第一個 div 的動畫延遲了 0.5 秒，以便讓上一個 div 的動畫完全結束后再開始下一個 div 的動畫效果。 總之，通過使用 CSS 的動畫屬性，我們可以實現頁面刷新時觸發動畫的效果，從而帶給用戶更流暢、更愉悅的用戶體驗，提高頁面的視覺吸引力。