CSS animation で遊び倒す　- ボタン Gooey Effect 2-

CSS animation day16 となりました。

[前回](https://qiita.com/duka/items/ebe90fc119a5b2c2c7d7) までのボタンです。

![ダウンロード (38).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/8a1c6522-60d3-a8b0-b3ec-0664459b8ad1.gif)


この時点での課題は、以下の通りです。

1. クリックを二度すると、突然上の2つのボタンが消えてしまう
2. Icon がない
3. クリックしたら、一番したのボタンのIcon　が変化してない


これらを仕上げていきましょう。

#1. 完成版
![ダウンロード (42).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/f396253c-1c3d-a494-9ff8-88337226dea5.gif)

<p class="codepen" data-height="448" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="daVzbv" style="height: 448px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Gooey Button ">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/daVzbv/">
  Gooey Button </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. 参考文献
[Codepen: Gooey Menu CSS ONLY](https://codepen.io/codemonkeyco/pen/JXrOdG?editors=1100)
[Codepen: Gooey Menu](https://codepen.io/lbebber/pen/LELBEo?editors=1100)
[サルワカ](https://saruwakakun.com/html-css/basic/font-awesome)

#3. 分解してみる

❶. __クリックを二度すると、突然上の2つのボタンが消えてしまう__

こちらに対しては、ボタンの初期設定に、translate3d(0,0,0)を設定すれば、解決できそうです。ではやっていきましょう。

```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="gooey">
        <input type="checkbox" id="start" />
        <label for="start">
          <div class="menu-open-button"></div>
        </label>
        <div class="circle1"></div>
        <div class="circle2"></div>
      </div>

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <filter id="filter">
            <feGaussianBlur
              in="SourceGraphic"
              stdDeviation="20"
              result="blur"
            />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
              result="filter"
            />
            <feBlend in="SourceGraphic" in2="filter" />
          </filter>
        </defs>
      </svg>
    </div>
  </body>
</html>
```

```styles.css
body {
  margin: 0;
  padding: 0;
}

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

.gooey {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  filter: url("#filter");
}

#start {
  display: none;
}

.menu-open-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: green;
  cursor: pointer;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  transform: scale(1, 1);
  z-index: 2;
}

.menu-open-button:hover {
  transform: scale(1.1, 1.1);
}

.circle1,
.circle2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: green;
  transition: transform ease-out 200ms;
  transform: translate3d(0, 0, 0);
}

#start:checked ~ .circle1 {
  transform: translate3d(0, -150px, 0);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 800ms;
}

#start:checked ~ .circle2 {
  transform: translate3d(0, -300px, 0);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 800ms;
}
```

![ダウンロード (39).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/bbd60918-162d-d790-fa59-6a387f741d2e.gif)

いい感じです。

❷. __Icon がない__
FontAwsome を使いましょう。
まずは、HTML </head> の直前に、下記をコピペしましょう。

```index.html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
```

[FontAwsome](https://origin.fontawesome.com/) のページへ行き、好きなフォントを探します。

<img width="1182" alt="スクリーンショット 2019-02-06 9.44.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/f63fe519-d6d3-227c-9cef-8ef5644ce270.png">


メール, はてなマークのアイコンを選択し、HTMLに貼ります


```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="gooey">
        <input type="checkbox" id="start" />
        <label for="start">
          <div class="menu-open-button"></div>
        </label>
        <div class="circle1"> 
            <i class="far fa-envelope"></i>
        </div>
        <div class="circle2">
            <i class="far fa-question-circle"></i>
        </div>
      </div>

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <filter id="filter">
            <feGaussianBlur
              in="SourceGraphic"
              stdDeviation="20"
              result="blur"
            />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
              result="filter"
            />
            <feBlend in="SourceGraphic" in2="filter" />
          </filter>
        </defs>
      </svg>
    </div>
  </body>
</html>
```

<img width="421" alt="スクリーンショット 2019-02-06 9.53.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/b4790cf4-fe9f-4ee3-064e-c27ecb31e651.png">

アイコンが出てきましたので、サイズや位置を調整します。
[サルワカ](https://saruwakakun.com/html-css/basic/font-awesome) の記事が大変わかりやすいです。

```index.html

  <div class="circle1">
     <i class="far fa-envelope mail"></i>
  </div>
  <div class="circle2">
     <i class="far fa-question-circle question"></i>
  </div>

```

```styles.css

.mail {
  font-size: 3em;
  color: #fff;
  padding: 26px;
}

.question {
  font-size: 3em;
  color: #fff;
  padding: 26px;
}
```

![ダウンロード (40).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/dee288b9-cecf-09a5-4525-2967eaa6cb14.gif)


いい感じです。
表現を加えます、アイコンのopacityが、だんだん濃くなるようにしましょう。

```styles.css
#start:checked ~ div i {
  animation: blight 600ms ease-in forwards;
}

@keyframes blight {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
```
![ダウンロード (41).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/900a7b99-2369-eb83-a8c0-d348449f43f6.gif)


いい感じです。
なお、forwards でアニメーションの再生を終了時で、固定することができます。


❸. __クリックしたら、一番したのボタンのIcon　が変化してない__
menu-opne-buttonに、Iconとアニメーションを設定しましょう。

```index.html
  <div class="gooey">

     <input type="checkbox" id="start" />
     <label for="start">
     <div class="menu-open-button">
        <i class="fas fa-plus"></i>
     </div>
     </label>

     <div class="circle1">
       <i class="far fa-envelope mail"></i>
     </div>

     <div class="circle2">
       <i class="far fa-question-circle question"></i>
     </div>
   </div>
```

```styles.css
.plus {
  font-size: 3em;
  color: #fff;
  padding: 27px 29px;
}

.mail {
  font-size: 3em;
  color: #fff;
  padding: 26px;
}

.question {
  font-size: 3em;
  color: #fff;
  padding: 26px;
}

#start:checked + label div i {
  transform: rotateZ(-45deg);
  transition-timing-function: ease;
  transition-duration: 300ms;
}
```

![ダウンロード (42).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/8aff78be-0efe-8973-e96a-f507cfd622f5.gif)


隣接セレクタの + を使って、アニメーションを追加してます。
+ を × にするには　rotateZ すれば OKですね。
<br/>
というわけで、2回に渡り、Gooey Buttonが完成しました。
プログラミングもそうですが、エラーに遭遇した時に、問題の切り分けを行い、どこで躓くのか？と考えることは大事ですね。すごい作品を見かけた時も、どうすればこの作品は出来上がるのか？自分が表現できてないのは、どこだ？とつぶさに自問自答して取り組めば、今より一歩前進し、ある時、はるか遠くのかなたまでたどり着くんですね。　

蝶を無我夢中で追ってると、いつか山の頂上にいたというのが、自分の好きな理想の状態ですが、これからも毎日コツコツ、デザインとアートに取り組みたいと思います。


それでは。また明日〜！