iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

CSS 讓你的網頁動起來系列 第 20

CSS微動畫 - 動起來番外篇!談談Animation的Step

Q: 今天是教師節呢,怎麼沒有放假?
A: 認真上課黑!本篇是可能實用,但更可能殺光腦細胞的steps阿!

上一篇在做倒數計時的圓餅圖時,針對animation-timing-function有使用到比較特別的值steps(1, start),本篇番外就要來講講steps的用法,算是補上之前沒有特別講到的部分!!另外其實這個用法,小編也是在找本次鐵人賽的靈感時看到的,之前從來沒有用過~~~下面除了講解以外,還會帶上一些圖比較好理解。 小編也需要圖加文才比較好懂阿!!

來看個程式碼 + 影片示意

示例一 steps的start

屬性animation-timing-function定義動畫播放的速度曲線,在沒有使用steps之前,不論速度快慢,動畫皆是由0%以設定的值的時間速度曲線漸變至100%,而steps的速度曲線卻不是如此。

  • .first使用steps(5, start)
  • .second使用linear
<style>
  .container {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 300px;
  }
  .item {
    height: 100px;
    width: 0;
    margin-bottom: 10px;
    background-color: SteelBlue;
    animation-duration: 10s;
    animation-name: roundFirst;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
  .first {
    animation-timing-function: steps(5, start);
  }
  .second {
    animation-timing-function: linear;
  }
  @keyframes roundFirst {
    0% {
      width: 0;
    }
    100% {
      width: 250px;
    }
  }
</style>
<div class="container">
  <div class="item first"></div>
  <div class="item second"></div>
</div>

steps start
上方影片中可以看到.first的寬度是一個一個加寬的!steps的第一個參數設定本次動畫會分為幾段演繹,而第二個參數設定什麼時候演繹。以範例來說,就是把100%分為5段,並且因為start的設定,會直接從第一段開始演繹。

示例二 steps的end

如果將上方程式碼的start改為end,那麼樣式看起來就會完全不一樣!

<style>
  .first {
    animation-timing-function: steps(5, end);
  }
</style>

steps end

所以兩個示例可以怎麼理解?

以上方的動畫來說,可以想像把動畫都除以5,所以:

  1. 每一段是20%。
  2. 每一段是2s。
  3. 每一段是50px。

如果設定 start

那麼動畫就會在前2s的時候先演繹@keyframes的前20%,所以寬度在前2s就會有50px。

如果設定 end

那麼動畫就會在演繹2s後才演繹@keyframes的前20%,所以寬度在2s之後才就會有50px。

那上方的.first還是動畫嗎?

A:是的!
steps雖然不像其他值一樣讓動畫從0%順順的演繹到100%,但它還是動畫,實現了讓animation可以分段演繹的效果。

看了很久吶(⋟﹏⋞)

在看到steps之前,小編如果想要做到.first的效果都是用別的方法寫的。 看完steps還是霧煞煞的可以考慮敲碗XD 原本想著看完steps後可以為後續的篇幅多點新靈感,最後發現原來好奇心只是殺死了一堆腦細胞啊!!


如果有寫錯的地方,歡迎點評! 會及時改進~
如果有更好的寫法,歡迎指教! 希望各位不吝賜教~
如果想看更多效果,歡迎敲碗! 提供示意圖小編寫寫看~
如果內容疑似侵權,拜託告知! 內容皆為小編理解後原創~
如果對你有點幫助,拿去用吧!


上一篇
CSS微動畫 - 倒數計時,繪製圓餅圖!
下一篇
CSS微動畫 - 圖片不裁切,純css實現分格淡出
系列文
CSS 讓你的網頁動起來30

尚未有邦友留言

立即登入留言