【踩坑】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 (不播放时保持在开始/结束时的样子)
  
  好抽象好难理解阿(ﾟ皿ﾟﾒ)!!先上图!
注意结束时，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
  直到写了这篇用按钮去控制动画播放後才发现...有这个属性真好阿