利用 Animation 製作美美的動畫吧

上上篇我們介紹了 Animation 的相關設定，在上一篇也實作了字體模糊動畫效果，本篇來試試看經典的球球追隨運動吧！

實作二：經典的球球追隨運動

基礎 HTML 的部分：

<div class="container">
 <div class="circle circle1"></div>
 <div class="circle circle2"></div>
 <div class="circle circle3"></div>
 <div class="circle circle4"></div>
 <div class="circle circle5"></div>
 <div class="circle circle6"></div>
</div>

動畫實現解說：

在此實作中，主要使用了 position 設定球球運動的路徑以及 CSS 的 opacity 效果，使跟隨的球球有殘影的感覺。並搭配動畫反向播放及延遲播放就能達成我們想要的效果。

1. 動畫設定：動畫名稱爲 circlemove，利用 top 及 left 設定球球運動路徑。記得先要爲每一顆球球設定 position:absolute; 。這邊有個小 tips ，當你維持一定的時間距離(如下範例 25% 的時間距離)，運動路徑設定的越遠，則球球運動看起來越快速，透過忽遠忽近的距離設定，可以讓球球運動看起來忽快忽慢。

@keyframes circlemove{
 0%{
  top:50px;
  left:50px;
 }
 25%{
  top:100px;
  left:300px;
 }
 50%{
  top:50px;
  left:500px;
 }
 75%{
  top:100px;
  left:600px;
 }
 100%{
  top:100px;
  left:900px;
 }
}

2. circle 動畫設定：animation-name: circlemove; 指定要實現的動畫名稱 circlemove，animation-duration:3s; 動畫播放時間爲 3 秒，animation-iteration-count:infinite; 動畫無限次播放，animation-timing-function:linear; 動畫中間過程計算方式使用簡單的線性，animation-direction:alternate; 動畫播放方向爲相反輪播，使球球不斷在路徑上來回。

.circle{
 animation-name: circlemove;
 animation-duration:3s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
 animation-direction:alternate;
}

3. 個別 circle 動畫設定：個別設定延遲播放，使後續播放的球球追隨前面的球球。而爲了實現整體畫面，要記得個別設定球球的大小及透明度。

.circle1{
 width: 100px;
 height: 100px;
}
.circle2{
 width: 60px;
 height: 60px;
 opacity:0.7;
 animation-delay:0.1s;
}
.circle3{
 width: 50px;
 height: 50px;
 opacity:0.5;
 animation-delay:0.2s;
}
.circle4{
 width: 40px;
 height: 40px;
 opacity:0.3;
 animation-delay:0.3s;
}
.circle5{
 width: 30px;
 height: 30px;
 opacity:0.2;
 animation-delay:0.4s;
}
.circle6{
 width: 20px;
 height: 20px;
 opacity:0.1;
 animation-delay:0.5s;
}

以上是今天的球球追隨運動，試試看吧