CSS3動畫是網頁設計中常用的效果之一，可以通過CSS3的animation屬性來實現。它可以讓元素在一段時間內按照指定的方式移動或改變樣式。

/* 圓形動畫 */
.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
animation-name: circle;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes circle {
0% {
transform: translateX(0px);
background-color: red;
}
50% {
transform: translateY(100px);
background-color: blue;
}
100% {
transform: translateX(0px);
background-color: red;
}
}

在CSS3動畫中，我們可以通過設置animation-duration屬性來指定動畫的時間長度。默認情況下動畫只會播放一次，如果需要循環播放可以設置animation-iteration-count為infinite。這樣動畫就會無限循環播放。

還有一些其他的屬性也可以控制CSS3動畫的周期，比如animation-timing-function可以控制動畫的速度曲線，animation-delay可以指定動畫延遲的時間等。

總的來說，CSS3動畫的周期可以通過不同的屬性設置來控制，通過合理設置這些屬性，我們可以實現各種各樣的動畫效果，為網頁設計增加更多的特色與互動性。