CSS animation で遊び倒す - Submit Button -

CSS animation day39 となりました。
やっと、画像アップロード制限(100MB月)が解除されました。
これから、バシバシ画像を貼っていきます！


#1. 完成版
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="EMPmwj" style="height: 265px; 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 (Experiment2)">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/EMPmwj/">
  Plane Button (Experiment2)</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. なぜか？
[UX Milk](https://uxmilk.jp/71295) に大変わかりやすい、マイクロインタラクションの記事が載ってました。　



効果的なマイクロインタラクションには、4つのステップが大事である。
>
1:  __トリガー__　　　　　
　ユーザーが次の行動へと促すためのきっかけ
2:  __ルール__  　　　　　　
　文言などのパラメーターは、インタラクションで何が起こるのかを示す
3:  __フィードバック__　　
　ユーザーがマイクロインタラクションをクリックするとき、何らかの反応を返す
4: __ループとモード__ 
　マイクロインタラクションがどれくらいの頻度で使われているか。
　繰り返されることで、ユーザーは親近感がわく。
　モードは、別のフィードバック反応で、ユーザーの操作が最初と異なるものを示す・


3, 4 は知らなかったです。納得ですね！

[こちら](https://note.mu/sadako_a_/n/n7c304bbcb5f3) の記事では、マイクロインタラクションには
>
1: 無意識にストレスなく利用できる様にする
2: 欲しいものをすぐに提供する
3: 人間味を感じるフィードバックを与える


が大事とのことです。大変勉強になりますね。

そして何と、

![スクリーンショット 2019-03-01 7.56.42.png](https://qiita-image-store.s3.amazonaws.com/0/232715/9f6cc126-826f-387a-8ba0-f00b84efb0a5.png)


こういう本があるそうです、読破したら、後日共有いたします。


#3. 参考文献
[Flyaway Send Button](https://codepen.io/adelbalso/pen/FwJcq)
[ANIMISTA](http://animista.net/play/attention/vibrate)
#4. 分解してみる

❶. 
今日は、メールを送信する時に、ボタンを押すと飛行機が飛んでいくアニメーションをつくりましょう。マークアップします。

```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">
        Send
      </div>
    </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;
  text-align: center;
  line-height: 100px;
  color: #8fc866;
  font-size: 28px;
  border-radius: 30px;
  border: 2px solid #8fc866;
  background-size: 400%;
}
```

![スクリーンショット 2019-03-01 14.45.04.png](https://qiita-image-store.s3.amazonaws.com/0/232715/e3b7a388-5609-e408-1a1a-b14d73228ff1.png)

画像を貼れることに、幸せを感じます。
Qiitaに投稿する皆様も、アップロード制限(100MB/月)には、気をつけてくださいね。


Send の横に、FontAwsomeで、飛行機のアイコンを探します。
やり方がわからないかたは、[前回](https://qiita.com/duka/items/c3bd66c8741ec826cd0e) の記事を参照ください。

テレグラムplane を採用します。
![スクリーンショット 2019-03-01 14.54.11.png](https://qiita-image-store.s3.amazonaws.com/0/232715/5eeb3310-71e4-7182-5899-f52fbcd39d99.png)


では、このicon を Send の横に配置しましょう。

```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">
      <div class="button">
        Send
        <i class="fab fa-telegram-plane plane"></i>
      </div>
    </div>
  </body>
</html>
```

```styles.scss

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

![スクリーンショット 2019-03-01 15.12.42.png](https://qiita-image-store.s3.amazonaws.com/0/232715/1c0b5c48-8054-08c8-552c-b06a2a932cae.png)


いい感じです！
<br/>
❷.

では、アニメーションをつけていきましょう。
上述の、マイクロインタラクションの4つのステップに則りましょう。

`1: トリガー`
ボタンをhover して、クリックに繋がる様に促すには、どういうアニメーションにしたら良いでしょうか？

飛行機が離陸準備をしていることを連想させるアニメーションをつければ良さそうですね。
そのためには

1: 飛行機が角度が変わって、滑走路を動く可能様に、X軸方向に動く
2: ボタンが発射準備整ったら、エンジン吹いて揺れるかの様に、振動が起こる
3: 離陸準備が整ったことを、border-width を変えて表現する

では、やっていきましょう！

```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 {
    transition-delay: 0.2s;
    animation: vibrate 0.3s infinite 0.5s both;
    border-width: 4px;
    .plane {
      transform: translateX(5px) rotate(10deg);
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
    }
  }
}

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

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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="bZEqLW" style="height: 265px; 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 (experiment)">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/bZEqLW/">
  Plane Button (experiment)</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>

animation-delay とtransform プロパティを使いました。

ちょっと振動がくどい場合は

```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.5s both;
    }
  }
}

.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);
  }
}
```
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="EMPmwj" style="height: 265px; 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 (Experiment2)">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/EMPmwj/">
  Plane Button (Experiment2)</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>

後者の方が、「micro」 なinteraction で、飛行機が飛びたくてうずうずしている表現が生まれ、クリックするトリガーになっています。
こっちの方がいいかもしれません。

飛行機が滑走路を移動し、到着し、エンジンをふかしたアニメーションを表現できました。
では次にといきたいところですが、長くなりそうなので、続きは次回にします。
それでは、また明日〜