CSS小圓點動畫

代碼：
/* 基礎樣式 */
.dot{
border-radius:50%;
width:10px;
height:10px;
background-color: #000;
margin-right:5px;
opacity:0;
/* transition 過渡屬性 */
transition: all 0.5s;
}
/* 動畫樣式 */
.dot.move{
/* animation 動畫屬性 */
animation: moveRight 1s ease-in forwards;
}
/* 關鍵幀 */
@keyframes moveRight{
0%{
opacity:0;
transform:translateX(0);
}
50%{
opacity:1;
transform:translateX(50px);
}
100%{
opacity:0;
transform:translateX(100px);
}
}

CSS小圓點是在前端開發中常見的一種基礎元素，本文將介紹如何使用CSS動畫來實現一個漂亮的小圓點移動效果。

首先我們需要定義一個基礎的小圓點樣式，包括圓角、寬高和顏色等屬性。

代碼：
.dot{
border-radius:50%;
width:10px;
height:10px;
background-color: #000;
margin-right:5px;
opacity:0;
transition: all 0.5s;
}

接下來我們需要定義一個動畫樣式，在這個樣式中使用了CSS3的animation屬性。

代碼：
.dot.move{
animation: moveRight 1s ease-in forwards;
}

moveRight是我們自己定義的一個關鍵幀，它對小圓點的透明度和位移進行了規定。

代碼：
@keyframes moveRight{
0%{
opacity:0;
transform:translateX(0);
}
50%{
opacity:1;
transform:translateX(50px);
}
100%{
opacity:0;
transform:translateX(100px);
}
}

關鍵幀中，我們規定了三個時間點的透明度和位移，一開始是完全透明并且不位移，中間時間點透明度為1，同時向右移動50像素，最后時間點回到完全透明，同時向右移動100像素。這樣，小圓點在移動的過程中就會呈現出透明度變化和位移的效果。

最后，在JS中添加控制小圓點移動的代碼。

代碼：
let dots = document.querySelectorAll('.dot');
dots.forEach((dot, index) =>{
setTimeout(() =>{
dot.classList.add('move');
}, index * 100);
});

以上就是CSS小圓點移動動畫的實現步驟，使用animation屬性和關鍵幀定義動畫效果，通過JS控制小圓點的移動。