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

圖源：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 (不播放時保持在開始/結束時的樣子)

    好抽象好難理解阿(ﾟ皿ﾟﾒ)!!先上圖!

  
  注意結束時，forwards跟both停在了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);}
         }
  

  但...從這張圖來看...
  none 跟 backwards 看起來一樣
  forwards 跟 both看起來也一樣呀!

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

  開始之前，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)(會兼具backwards和forwards的特性)

  

       .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