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

CSS animation day 50 となりました。

やっと、50日。次は、100日を目指します。
一歩一歩大事ですね。


本日は、Codepen で見つけた 素敵な作品の Particle Button を作ります。 

#1. 完成版

![ダウンロード (63).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/66f59055-773c-ff80-04ab-cc99b441a856.gif)

<p class="codepen" data-height="639" data-theme-id="0" data-default-tab="html,result" data-user="hiroyaiizuka" data-slug-hash="YgEgKp" style="height: 639px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="YgEgKp">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/YgEgKp/">
  YgEgKp</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. 参考文献
[CSS Fizzy Button](https://codepen.io/jcoulterdesign/pen/xVJWvz)
[CSS Particle Button](CSS Particles button)

#3. 分解してみる

❶. 
マークアップしましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="button">Downloads</div>
    </div>
  </body>
</html>
```


```styles.scss
body {
  margin: 0;
  padding: 0;
  background: #2c3940;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  width: 200px;
  height: 48px;
  background: transparent;
  color: #fff;
  line-height: 48px;
  text-align: center;
  font-size: 12px;
  border: 2px solid #fff;
  border-radius: 2px;
}
```

![スクリーンショット 2019-03-13 8.02.09.png](https://qiita-image-store.s3.amazonaws.com/0/232715/6c6a02a6-796f-ef40-d1a9-b6f62412d4be.png)
<br/>
❷. 
hover アニメーションをつけていきましょう。
hoverしたら、 
>
1: boxの色が変わる
2: アイコンが出現する
3: Downloads の文字が右にずれる
4: icon が下から出現する
5: パーティクルが出現する

ようにします。
まず、1-3 まで、作りましょう。

```index.html
 <div class="container">
      <div class="button">
        <span>Downloads</span>  //追加
      </div>
 </div>
```

```styles.scss
.button {
  width: 200px;
  height: 48px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 2px;
  transition-duration: 0.2s;

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

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

![ダウンロード (60).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/e6474f28-4416-603a-8922-d4a39ee5e3b3.gif)

いい感じです。

4: にうつります。
fontawsome を使って、ダウンロードボタンを表示しましょう。
fontawsome の使い方がわからない方は、[こちら](https://qiita.com/duka/items/c3bd66c8741ec826cd0e) をご参照ください。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="button">
        <span>Downloads</span>
        <i class="fas fa-download"></i>
      </div>
    </div>
  </body>
</html>
```

![スクリーンショット 2019-03-13 9.26.09.png](https://qiita-image-store.s3.amazonaws.com/0/232715/12dec6bb-5ae7-a68b-ea90-311f40fdf3b5.png)

アイコンが出ました。
では、button をhover したら、アイコンが出現するようにしましょう。

```styles.scss

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

i {
  opacity: 0;
  transform: translate(42px, -26px);
}

```
![ダウンロード (61).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/33b7084f-bea5-f8e7-3af9-becf98cd1e41.gif)
<br/>
❸.
5: パーティクルを出しましょう。ここが一番の難関です。
[前回](https://qiita.com/duka/items/498d1c72cd46abea8392) の記事を参照しましょう。


```index.html

<div class="container">
  <div class="button">
      <span>Downloads</span>
      <i class="fas fa-download"></i>
    <div class="particles">
      <div class="particle"></div>
      <div class="particle"></div>
                ・
　　　　　　　　　 ・
　　　　　　　　　 ・
　　　　　　　　　×　100 
    </div> 
  </div> 
</div> 
```

```styles.scss
  &:hover {
        ・・・
    .particle {
      opacity: 1;
      animation:  particle 2s ease-out 0.1s infinite
    }
  }
}

.particles {
  position: absolute;
  top: 0;
  left: -100px;
  width: 300px;
  height: 100px;
  z-index: -1;
  .particle {
    display: inline-block;
    opacity: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #fff;
    @for $i from 1 through 100 {
      &:nth-child(#{$i}) {
        transform: translate(random(100) * 1vw, random(100) * 1vh);
        background: hsl(random(360), 100%, 65%);
      }
    }
  }
}

@keyframes particle {
  0% {
    transform: translate(45vw, 42vh);
  }
  20% {
    opacity: 0.5;
  }

  60%,
  100% {
    opacity: 0;
  }
}
```

![ダウンロード (63).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/be038fb9-cbc3-994d-0d13-2b8541314507.gif)


particleを button の中央に100個集め、z-index:-1 で後ろ側に回してます。
これは、ボタンの内側に particleが飛ばないようにするためです。
particleは、前回の記事の通り、roop 文とrandom() を使い、hsl で設定してます。


なかなか派手な動きですが、microinteraction としては、まだまだ完成度は低いです。
hover 時にフィードバックの演出がくどすぎて、不快感を与えかねません。
さらに効果的なボタンになるために、どうしたら良いでしょうか？長くなりそうなので、続きは次回です。


それでは、また明日〜