CSS循環(huán)執(zhí)行動畫可以通過使用CSS3中的動畫屬性實現(xiàn)，這些屬性包括animation、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction等。在這篇文章中，我們將使用animation屬性來創(chuàng)建一個基于CSS的循環(huán)執(zhí)行動畫。

.animated {
animation-name: example;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}

上面的代碼可以創(chuàng)建一個無限循環(huán)的CSS動畫效果，其中animation-name屬性指定動畫的名稱為example，animation-duration屬性設(shè)置動畫執(zhí)行時間為2秒，animation-timing-function屬性設(shè)置動畫速度為線性，animation-delay屬性設(shè)置動畫開始時間為0秒，animation-iteration-count屬性設(shè)置動畫執(zhí)行次數(shù)為無限次，animation-direction屬性設(shè)置動畫方向為交替方向，表示在一次循環(huán)結(jié)束后，動畫方向會反轉(zhuǎn)。

在@keyframes規(guī)則中，我們使用了transform屬性來實現(xiàn)動畫效果，其中translateX函數(shù)可以實現(xiàn)元素水平方向的移動效果。在0%和100%兩個關(guān)鍵幀中，我們使用不同的transform值來分別表示元素在動畫開始時和結(jié)束時的狀態(tài)。

總之，通過使用CSS的animation屬性和@keyframes規(guī)則，我們可以很容易地創(chuàng)建循環(huán)執(zhí)行的CSS動畫效果。開始嘗試吧！