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

CSS animation day40 となりました。

[前回](https://qiita.com/duka/items/2466182ab623d2093711) の続きである、Submit Button を完成させましょう。


#1. 完成版
![ダウンロード (32).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/82cd835d-0cef-dcb6-832d-9281fe339dd2.gif)

<p class="codepen" data-height="327" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="qvZbze" style="height: 327px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Plane Button">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/qvZbze/">
  Plane 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. 参考文献
[Flyaway Send Button](https://codepen.io/adelbalso/pen/FwJcq)
[ANIMISTA](http://animista.net/play/attention/vibrate)

#3. 分解してみる
❶.
マクロインタラクションの4つのstepである `3: フィードバック` からやっていきましょう。

ボタンをクリックしたら、飛行機が離陸するアニメーションをつけたいのですが、どうしたら良いでしょうか？

1: 飛行機が飛び立つ
2: テキストが変わる。(人間味が感じられるテキストだとbetter)
3: ボタンが動く

などが考えられます。
まずは、「クリックしたら」を、Javascript　なしで表現しましょう。
[以前の記事](https://qiita.com/duka/items/ebe90fc119a5b2c2c7d7) を参考にして、:checked で実装します。
　　　

```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.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <input type="checkbox" id="start" />
      <label for="start">
        <div class="button">
          Send
          <i class="fab fa-telegram-plane plane"></i>
        </div>
      </label>
    </div>
  </body>
</html>
```

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

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

.button {
  position: relative;
  width: 200px;
  height: 100px;
  padding-right: 20px;
  text-align: center;
  line-height: 100px;
  color: #8fc866;
  font-size: 28px;
  border-radius: 30px;
  border: 2px solid #8fc866;
  background-size: 400%;

  &:hover {
    border-width: 4px;
    .plane {
      animation: vibrate 0.3s infinite 0.3s both;
    }
  }
}

#start {
  display: none;
}

#start:checked ~ label .plane {
  animation: fly 0.4s ease both;
}

@keyframes fly {
  100% {
    transform: translate(200px, -100px);
    opacity: 0;
  }
}

.plane {
  font-size: 35px;
  color: #ffc;
  position: absolute;
  top: 37px;
  left: 155px;
}

@keyframes vibrate {
  0% {
    transform: translate(0) rotate(10deg);
  }
  20% {
    transform: translate(-1px, 1px) rotate(10deg);
  }
  40% {
    transform: translate(0px, 0px) rotate(10deg);
  }
  60% {
    transform: translate(-1px, 1px);
  }
  80% {
    transform: translate(0px, 0px) rotate(10deg);
  }
  100% {
    transform: translate(0, 1px) rotate(10deg);
  }
}
```

![ダウンロード (28).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/a255e6f2-2bb7-fe60-6c41-9dbb87039813.gif)


いい感じですね！
<br/>
❷. 
改善点として、Send　ボタンが、「今、送ったよ！」 ということを、ユーザーに教えるフィードバックが足りてません。

Send を Sent !! に変えましょう！ (!! で、人間味を出します。)　
これは、beforeクラスを用いれば実現できそうです。


```styles.scss

.button {
  position: relative;
  width: 200px;
  height: 100px;
  padding-right: 20px;
  text-align: center;
  line-height: 100px;
  color: #8fc866;
  font-size: 28px;
  border-radius: 30px;
  border: 2px solid #8fc866;
  background-size: 400%;

  &:hover {
    border-width: 4px;
    .plane {
      animation: vibrate 0.3s infinite 0.3s both;
    }
  }

  &:before{
    content: 'Sent';
    font-size: 0px;
  }
}


#start:checked ~ label .button {
  font-size: 0;
}

#start:checked ~ label .button:before {
  font-size: 28px;
  padding-left: 28px;
}

```

![ダウンロード (29).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/47be84eb-df68-fb6f-135f-b72a02913981.gif)



元のテキストは、クリックされると fontSizeが 0pxになり、
:beforeクラスの fontSize 0px のテキストが、クリックされると28px になる様に設定しました。
<br/>
❸. 
では、クリックしてボタンが動く様にしましょう。

どう動けば良いでしょうか？

飛行機が飛び立つ時に、爆風がおこると仮定すると、ボタンは後ろに吹き飛ばされます。このイメージをアニメーションで作りましょう。

```styles.scss
#start:checked ~ label .button {
  font-size: 0;
  animation: moveButton 0.6s ease;
}

@keyframes moveButton {
  50% {
    margin-right: 60px;
  }
}
```

![ダウンロード (30).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/2bbcd410-f4a4-7c98-2064-67743bc7e9c9.gif)

いい感じです！　
ただ、まだフィードバックが足りてません。

ボタンの背景カラーと、文字の色をクリックして変わる様にしましょう。

```styles.scss
#start:checked ~ label .button {
  font-size: 0;
  animation: moveButton 0.6s ease;
  background: #8fc866;
}

#start:checked ~ label .button:before {
  font-size: 28px;
  color: #fff;
  padding-left: 28px;
}
```

![ダウンロード (32).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/12c605db-b7e7-573e-2569-5e4b55fd934b.gif)

いい感じです！
これで、ユーザーは送ったぞ！ という、フィードバックがよく伝わります。


マイクロインタラクションの4つのstep を意識して作ると、
大変素敵なアニメーションが作れますね。
それでは、また明日〜