利用 Animation 製作美美的動畫吧

上一篇我們介紹了 Animation 的相關設定，Animation 有多個屬性供設定，比起 Transitions，我們可以做出更細緻的動畫設定，來試試字體模糊輪播動畫吧。

字體模糊輪播動畫

基礎 HTML 的部分：使用 span 寫入內容

<div class="container">
 <span class="span1">好</span>
 <span class="span2">想</span>
 <span class="span3">工</span>
 <span class="span4">作</span>
 <span class="span5">室</span>
</div>

動畫實現解說：

在此實作中，主要使用了CSS filter 當中的 blur 效果，搭配動畫反向播放及延遲播放就能達成我們想要的效果。

1. 動畫設定：動畫名稱爲 loadingspan，設定效果爲不模糊到逐漸模糊至 2px。

@keyframes loadingspan{
 0%{
 filter:blur(0px);
 }
 100%{
 filter:blur(2px);
 }
}

2. span 動畫設定：animation-name: loadingspan; 指定要實現的動畫名稱 loadingspan，animation-duration:1s; 動畫播放時間爲 1秒，animation-iteration-count:infinite; 動畫無限次播放，animation-timing-function:linear; 動畫中間過程計算方式使用簡單的線性，animation-direction:alternate; 動畫播放方向爲相反輪播，即奇數次由 0% 播放至 100%，偶數次由 100% 播放至 0%，爲此效果最重要的設定，實現字體模糊再顯現再模糊…。

span{
 animation-name: loadingspan;
 animation-duration:1s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
 animation-direction:alternate;
}

3. 個別 span 動畫設定：個別設定延遲播放，使畫面中每個字體有輪流模糊顯現的感覺。

.span2{
 animation-delay:0.2s;
}
.span3{
 animation-delay:0.4s;
}
.span4{
 animation-delay:0.6s;
}
.span5{
 animation-delay:0.8s;
}

以上爲今天字體模糊輪播動畫，試試看吧:)