CSS過渡效果循環(huán)可以讓你的網(wǎng)頁更具活力和動感。如何實現(xiàn)呢？請看下面的示例代碼：

.box {
width: 100px;
height: 100px;
background-color: red;
transition: all 1s linear;
}
.box:hover {
width: 200px;
background-color: blue;
transform: rotate(360deg);
}
.animation {
animation: loop 3s infinite;
}
@keyframes loop {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

在這段代碼中，我們首先定義了一個 box 類，當(dāng)鼠標(biāo)懸停在元素上時，會觸發(fā)過渡效果。這個過渡效果包括寬度增加、背景顏色改變和旋轉(zhuǎn)360度。接著，我們定義了一個 animation 類，該類應(yīng)用了一個名為 loop 的動畫，這個動畫會將元素旋轉(zhuǎn)一圈。

在 keyframes 中，我們定義了兩個狀態(tài)：0% 代表初始狀態(tài)，元素不旋轉(zhuǎn)；100% 代表結(jié)束狀態(tài)，元素旋轉(zhuǎn)一圈。在 animation 中，我們將該動畫應(yīng)用于 animation 類，設(shè)置循環(huán)次數(shù)為無限循環(huán)。

這樣，當(dāng)我們將 animation 類應(yīng)用于某個元素時，該元素就會無限循環(huán)旋轉(zhuǎn)。這樣的循環(huán)效果可以用于制作 loading 動畫、輪播圖等。