CSS3動畫已經成為網頁設計中不可或缺的一部分，能夠給網頁增添生動、活潑的元素。在CSS3中，我們可以使用animation屬性來設置動畫效果，下面我們來看看如何使用CSS3動畫循環出現三個點。

.dot {
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #000;
margin: 10px;
animation: dot 1s ease-in-out infinite;
}
@keyframes dot {
0% {
opacity: 0.2;
transform: translate(0, 0);
}
25% {
opacity: 1;
transform: translate(20px, 0);
}
50% {
opacity: 0.2;
transform: translate(40px, 0);
}
100% {
opacity: 0.2;
transform: translate(40px, 0);
}
}

上面的代碼中，我們使用了一個類名為“dot”的元素作為示例。該元素定義了一個圓形黑色背景，高度和寬度為12px，圓角半徑為50％。我們為這個元素添加了一個名為“dot”的動畫，該動畫會無限重復。

接下來我們定義了一個名為“dot”的關鍵幀（@keyframes）。在這些關鍵幀中，我們定義了圓點透明度和位置的變化。在0％的關鍵幀中，圓點的不透明度為0.2，位置是(0,0)。在25％的關鍵幀中，圓點的不透明度為1，位置為(20px, 0)。在50％的關鍵幀中，圓點的不透明度為0.2，位置為(40px, 0)。在100％的關鍵幀中，圓點的不透明度為0.2，位置不變（(40px, 0)）。

通過這些關鍵幀的組合，我們可以讓圓點以一種有規律的方式無限循環出現，增加頁面視覺效果。如果你想在頁面中使用類似以上的動態效果，就可以按照這個模板進行設置。