iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 16
0

利用 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);
 }
}
  1. 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;
}
  1. 個別 span 動畫設定:個別設定延遲播放,使畫面中每個字體有輪流模糊顯現的感覺。
.span2{
 animation-delay:0.2s;
}
.span3{
 animation-delay:0.4s;
}
.span4{
 animation-delay:0.6s;
}
.span5{
 animation-delay:0.8s;
}

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


上一篇
Day15 CSS 動畫 Animation - 基礎篇
下一篇
Day17 CSS 動畫 Animation 實作練習(下)
系列文
前端之 " wow~原來是這樣啊 "30

尚未有邦友留言

立即登入留言