CSS animation で遊び倒す - Particle Button 2 -

CSS animation day 51 となりました。

[前回](https://qiita.com/duka/items/7d72de52dcebec8279b3) の続きのボタンを作っていきます。

#1. 完成版
![ダウンロード (67).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/ca84216c-b3ac-7b98-9d15-36b6ca9402fa.gif)

<p class="codepen" data-height="451" data-theme-id="0" data-default-tab="html,result" data-user="hiroyaiizuka" data-slug-hash="MxrNwY" style="height: 451px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="DownLoads! ">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/MxrNwY/">
  DownLoads! </a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#2. 参考文献
[Pure CSS Loading Bar Button](https://codepen.io/jcoulterdesign/pen/NxbePR)
[CSS Fizzy ![uploading-0]()
Button](https://codepen.io/jcoulterdesign/pen/NxbePR)

#3. 分解してみる

❶. 
前回の 動画です。

![ダウンロード (63).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/b8dd24f7-5c04-0741-97ba-8c1dbf48936d.gif)


問題点はというと、
1: hover した時に、microinteraction が統一されていない。
2: daownloadするためのボタンなのに、hover に演出が偏りすぎている、Particle があざとい

などが考えられます。

Particle はクリックしてダウンロードした時に瞬間出るようにし、さらにクリックしたことがわかるように形を変えていきましょう。

クリックしたら、〜がおこる　というコードを、Javascript なしで書いていきます。
このかき方をよく存じないかたは、以前の[記事](https://qiita.com/duka/items/ebe90fc119a5b2c2c7d7) をご参照ください。


```index.html
<body>
    <div class="container">
      <input type="checkbox" id="start" />
      <label for="start">
        <div class="button">
          <span>Downloads</span>
          <i class="fas fa-download"></i>
　　　　　　　　　　　・・・
```

```styles.scss
　　　　　・・・
.button {

  &:hover {
    animation: hoverEffect 1s ease;
    box-shadow: 220px 0px 20px #fff inset;

    span {
      transform: translateX(25px);
      transition-duration: 0.3s;
      color: #000;
    }

    i {
      opacity: 1;
      transition-duration: 0.3s;
      transform: translate(42px, -36px);
    }
  }
}

#start {
  display: none;
}

#start:checked ~ label .button {
  @for $i from 1 through 100 {
    .particle {
      animation: particle 2s ease-out 0.1s;
    }

    @keyframes particle#{$i} {
      0%,
      50% {
        opacity: 0;
        transform: translate(25vw, 20vh);
      }
      100% {
        opacity: 1;
        transform: translate(random(35) * 1vw, random(25) * 1vh);
      }
    }
  }
}
```

![ダウンロード (64).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/bc94bbe3-8d9a-acc8-2d54-b7567a5f9e84.gif)

クリックして、Particle が出るようになりました。
<br/>
❷.
ただし、これだけでは、ダウンロードしてるよ！というフィードバックが足りてません。
マイクロインタラクションの[本](https://www.oreilly.co.jp/books/9784873116594/) によると、データを前面に出すと良いとのことです。
つまり、あとどれくらいでダウンロードが完了するかが、一目でわかるデータです。
ボタンの形状を変えて、ダウンロードの進行具合のデータがわかるようにしましょう。

```styles.scss

#start:checked ~ label .button {
         　　・・・
  animation: download 2s cubic-bezier(0.755, -0.245, 0.175, 1) 0.1s forwards,
    success 0.2s ease 1.9s forwards;
}


@keyframes download {
  10% {
    width: 20px;
    height: 40px;
    background-color: #fff;
  }

  35% {
    width: 405px;
    height: 16px;
    background-color: #fff;
    border: 2px solid #000;
  }

  38% {
    width: 384px;
    height: 16px;
    background-color: #000;
    border: 2px solid #000;
  }

  40% {
    width: 400px;
    height: 16px;
    background-color: #000;
    border: 2px solid #000;
    box-shadow: 10px 0px 2px #ded46e inset;
  }
  55% {
    width: 400px;
    height: 16px;
    background-color: #000;
    box-shadow: 100px 0px 2px #ded46e inset;
    border: 2px solid #000;
  }
  70% {
    width: 400px;
    height: 16px;
    background-color: #000;
    box-shadow: 200px 0px 2px #ded46e inset;
    border: 2px solid #000;
  }
  97% {
    width: 400px;
    height: 16px;
    opacity: 1;
    background-color: #000;
    box-shadow: 500px 0px 2px #ded46e inset;
    border: 2px solid #000;
  }
  100% {
    opacity: 0;
  }
}

@keyframes success {
  50% {
    opacity: 1;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    box-shadow: 200px 0px 2px #ded46e inset;
  }
  75% {
    opacity: 1;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: none;
    box-shadow: 200px 0px 2px #ded46e inset;
  }
  100% {
    opacity: 1;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: none;
    box-shadow: 200px 0px 2px #ded46e inset;
  }
}
```

![ダウンロード (66).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/f60b97be-889c-c027-0c3f-049f18afbfd9.gif)


かなり、いい感じの動きになりました。
Particle もこれだと、あまり違和感なく、効果的ですね。
<br/>
❸.
最後の円にダウンロードが終了したフィードバックをつけましょう。
マイクロインタラクションの[本](https://www.oreilly.co.jp/books/9784873116594/) によると、文字のラベルはなるべくさけ、アイコンに変えられれば変えた方が良いとのことです。

終了のアイコンを、FontAwsome で探しましょう。

```index.html
 <div class="button">
          <span>Downloads</span>
          <i class="fas fa-download"></i>
          <i class="fas fa-check"></i> //追加
          <div class="particles"> 
          ・・・
```

```styles.scss

#start:checked ~ label .button {
  span,
  .fa-download {
    opacity: 0;
  }

  .fa-check {
    font-size: 28px;
    color: #fff;
    transform: translate(15px, -10px);
    animation: complete 0.3s ease 2.4s forwards;
  }
  animation: download 2s cubic-bezier(0.755, -0.245, 0.175, 1) 0.1s forwards,
    success 0.3s ease 1.7s forwards;
}

@keyframes complete {
  100% {
    opacity: 1;
  }
}
```

![ダウンロード (67).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/7cca4605-ff08-9886-4cdb-1f4184a277f3.gif)


完成しました。
一つ一つのアニメーションを丁寧につなぎ合わせることで、ボタンに命を吹き込むことができますね。

それでは、また明日〜