CSS3 動畫 圓圈是一種很常見的動畫效果，它可以讓頁面更加生動有趣。下面我們來學習如何實現(xiàn)一個基礎的 CSS3 動畫 圓圈。

.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
animation: circle 2s infinite;
}
@keyframes circle {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(2);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}

上面的代碼中，我們給一個 div 添加了一個 .circle 的類，然后定義了它的寬高為 50px，設置了圓形的邊框半徑，背景顏色設置為紅色，最后啟用一個名為 circle 的動畫，時間為 2s，循環(huán)無限次。

接著，我們利用 @keyframes 定義了這個動畫，將其分成了 0%、50%、100% 三個階段。0% 階段表示初始狀態(tài)，50% 階段表示中間狀態(tài)，100% 階段表示結束狀態(tài)。

在 0% 階段中，我們設置了 transform 和 opacity，表示在初始狀態(tài)下它的大小和透明度都是正常的。在 50% 階段中，我們將其大小設置為原來的兩倍，透明度為 0.5。在 100% 階段中，又恢復到原來的大小和透明度。

這樣，我們就完成了一個簡單的 CSS3 動畫 圓圈效果。