CSS 邊框動畫是一種非常有用的效果，可以使邊框在鼠標懸停或頁面加載時出現動畫效果。這種效果可以吸引用戶的注意力，增加頁面的視覺效果。下面是一個簡單的例子，代碼使用 pre 標簽：

/* 添加邊框動畫 */
.border-animation {
position: relative;
border: 3px solid #ddd;
transition: all 0.5s ease-out;
}
/* 當鼠標懸停在元素上時，使邊框變寬 */
.border-animation:hover {
border: 6px solid #3498db;
}
/* 在頁面加載時，使用動畫使邊框逐漸出現 */
.border-animation.load {
animation: border 1s ease-in-out;
}
/* 動畫關鍵幀 */
@keyframes border {
from {
border-width: 0;
}
to {
border-width: 6px;
}
}

使用這個 CSS 代碼，您可以將邊框動畫應用到任何元素上。只需將類名為 border-animation 的元素添加到您的 HTML 代碼中，并添加一個 .load 類，以便在頁面加載時觸發動畫。當您鼠標懸停在元素上時，邊框會變寬，并且過渡效果會使變化更加平滑。

這個邊框動畫效果可以讓您的網站看起來更加現代和有趣，但也需要注意不要使用過多或過于復雜的動畫效果，這會增加頁面的加載時間并影響用戶的體驗。