CSS3邊框交替動畫是一種非?？犰诺男Ч?，可以讓你的網頁煥然一新。這種動畫效果是通過使用CSS3中的動畫屬性和邊框屬性來完成的。下面我們就來一步步學習如何實現這個效果。

/*定義帶有動畫效果的邊框*/
.anim-border {
border: 3px solid;
border-image: linear-gradient(to bottom, #000, #FFF) 10;
}
/*定義動畫*/
@keyframes border-animation {
0% {
border-image-source: linear-gradient(to bottom, #000, #FFF);
}
25% {
border-image-source: linear-gradient(to right, #000, #FFF);
}
50% {
border-image-source: linear-gradient(to top, #000, #FFF);
}
75% {
border-image-source: linear-gradient(to left, #000, #FFF);
}
100% {
border-image-source: linear-gradient(to bottom, #000, #FFF);
}
}
/*應用動畫*/
.anim-border:hover {
animation: border-animation 3s infinite;
}

以上代碼中，我們定義了一個class為.anim-border的元素，并給它設置了一組不帶動畫效果的邊框樣式，并使用border-image屬性來設置帶有漸變效果的邊框。接著我們定義了一個名為border-animation的動畫，其中我們使用了5個不同的關鍵幀（0%，25%，50%，75%，100%）分別對應邊框漸變的5個不同方向。

最后，我們把這個動畫屬性應用在.anim-border元素上，并設置它應該持續3秒鐘，并無限重復播放。

大功告成！現在我們可以在hover時看到.anim-border元素的邊框交替動畫效果啦。