iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
自我挑戰組

前進切版之路! CSS微體驗系列 第 17

【踩坑】animation 選單按鈕動起來(複習篇)

某天閒晃網站時看到一個充滿魔性的選單按鈕
是這個樣子的

圖源:https://www.pinterest.com/pin/446067538096146820/

這如果應用在實際的選單按鈕一定很好看!!!

剛學了一點animation跟JS找到了很棒的練習作業◑ω◐+

先來簡單複習一下怎麼做出CSS動畫

@keyframes

當我們建立好物件的基本外觀之後
先用@keyframes建立影格!(想像一下你想要讓動畫怎麼動)

@keyframes 動畫名稱{
  from{
    background-color: #f00;
    transform: translateX(100px);
    }
  to{
    background-color: #fa0;
    transform: translateX(300px);
    }
}

利用%數的話還可以分的更細~

@keyframes 動畫名稱{
  0%{
    background-color: #f00;
    transform: translateX(100px);
    }
  50%{
    background-color: #f00;
    transform: translateX(100px);
    }
  100%{
    background-color: #fa0;
    transform: translateX(300px);
    }
}

規劃好影格怎麼動之後,就要讓它套進該物件囉~
請務必使用↓↓↓↓↓

animation

animation是寫在要有動畫作用的物件
簡寫的時候原則上沒有順序,唯一在秒數順序的部分
首先是animation-duration
然後才是animation-delay

animation: name | duration | timing-function | delay | iteration-count direction | fill-mode | play-state;
  • animation-name: Move;(注意會分大小寫)

  • animation-duration:1s;(播放時間)

  • animation-delay:3s;(延遲播放)

  • animation-iteration-count:(播放次數)

    • 數字
    • infinite;(無限)
  • animation-direction (運行方向)

    • normal (順轉,預設)
    • reverse (反轉)
    • alternate (順向交替,要搭配一次以上的播放次數)
    • alternate-reverse (反向交替,要搭配一次以上的播放次數)

      codepen實作
  • animation-timing-function: (變化的曲線)

    • linear

    • ease-in

    • ease-out

    • ease-in-out

    • cubic-bezier

      利用F12開發者工具,點選帶有動畫的物件,再點擊紫色的小方塊可以叫出模擬運動變化的曲線,可以偷懶直接拉曲線來找出自己想要的運行方式( • ̀ω•́ ) --> 還可以拉出奇怪的線條

      codepen實作
      延伸閱讀-《Understanding Easing Functions For CSS Animations And Transitions

  • animation-fill-mode(動畫播放前/結束後的狀態)->注意infinite循環要關掉

    • none

    • backwards (不播放時保持在開始時的樣子)

    • forwards (不播放時保持在結束時的樣子)

    • both (不播放時保持在開始/結束時的樣子)

      好抽象好難理解阿(゚皿゚メ)!!先上圖!


    注意結束時,forwardsboth停在了100%影格設定的translateX(300px)

       .test1{  animation:test 3s  none ;}
       .test2{  animation:test 3s  backwards ;}
       .test3{  animation:test 3s  forwards ;}
       .test4{  animation:test 3s  both ;}
       @keyframes test{
         0%{
           background-color: #f00;
           transform: translateX(100px);
           }
         100%{
           background-color: #fa0;
           transform: translateX(300px);}
           }
    

    但...從這張圖來看...
    nonebackwards 看起來一樣
    forwardsboth看起來也一樣呀!

    這裡真的困擾我很久(́=◞౪◟=‵)
    研究了一會兒發現加上延遲會大不同喔~

    開始之前,none的起始位置是CSS設定的原始狀態,而非0%影格,結束時none也會回復原始狀態translateX(0px)
    開始之前,backwards的起始位置是0%影格所設定的translateX(100px),結束時backwards則會回復原始狀態translateX(0px)

    開始之前,forwards的起始位置是原始狀態translateX(0px),結束時forwards則會停留在100%影格設定的translateX(300px)
    開始之前,both的起始位置是0%影格所設定的translateX(100px),結束時both則會停留在100%影格設定的translateX(300px)(會兼具backwardsforwards的特性)

         .test1a{ animation:test 3s 2s none;}
         .test2a{ animation:test 3s 2s backwards;}
         .test3a{ animation:test 3s 2s forwards;}
         .test4a{ animation:test 3s 2s both;}
         @keyframes test{
           0%{
             background-color: #f00;
             transform: translateX(100px);
             }
           100%{
             background-color: #fa0;
             transform: translateX(300px);}
             }
    

    code實作玩玩看

  • animation-play-state

    • running(播放,預設)
    • paused(暫停)
      這個屬性常常配合JS下去運作,一開始還覺得他很雞肋XD
      直到寫了這篇用按鈕去控制動畫播放後才發現...有這個屬性真好阿

今天先說到這裡~熟悉了動畫的特性之後就可以來做那顆魔性按鈕了(握拳)
明天見~

參考資料:

  1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
  2. https://developer.mozilla.org/zh-TW/docs/Web/CSS/animation-fill-mode

上一篇
【心得】我就是要跟別人不一樣!!List 清單樣式變變變~
下一篇
【踩坑】animation 選單按鈕動起來(實作篇)
系列文
前進切版之路! CSS微體驗30

尚未有邦友留言

立即登入留言