CSS animation day39 となりました。
やっと、画像アップロード制限(100MB月)が解除されました。
これから、バシバシ画像を貼っていきます！
1. 完成版
See the Pen Plane Button (Experiment2) by hiroya iizuka (@hiroyaiizuka) on CodePen.
2. なぜか？
UX Milk に大変わかりやすい、マイクロインタラクションの記事が載ってました。
効果的なマイクロインタラクションには、4つのステップが大事である。
1: トリガー
ユーザーが次の行動へと促すためのきっかけ
2: ルール
文言などのパラメーターは、インタラクションで何が起こるのかを示す
3: フィードバック
ユーザーがマイクロインタラクションをクリックするとき、何らかの反応を返す
4: ループとモード
マイクロインタラクションがどれくらいの頻度で使われているか。
繰り返されることで、ユーザーは親近感がわく。
モードは、別のフィードバック反応で、ユーザーの操作が最初と異なるものを示す・
3, 4 は知らなかったです。納得ですね！
こちら の記事では、マイクロインタラクションには
1: 無意識にストレスなく利用できる様にする
2: 欲しいものをすぐに提供する
3: 人間味を感じるフィードバックを与える
が大事とのことです。大変勉強になりますね。
そして何と、
こういう本があるそうです、読破したら、後日共有いたします。
3. 参考文献
4. 分解してみる
❶.
今日は、メールを送信する時に、ボタンを押すと飛行機が飛んでいくアニメーションをつくりましょう。マークアップします。
<!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>
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%;
}
画像を貼れることに、幸せを感じます。
Qiitaに投稿する皆様も、アップロード制限(100MB/月)には、気をつけてくださいね。
Send の横に、FontAwsomeで、飛行機のアイコンを探します。
やり方がわからないかたは、前回 の記事を参照ください。
テレグラムplane を採用します。
では、このicon を Send の横に配置しましょう。
<!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>
.plane {
font-size: 35px;
color: #ffc;
position: absolute;
top: 37px;
left: 155px;
}
いい感じです！
❷.
では、アニメーションをつけていきましょう。
上述の、マイクロインタラクションの4つのステップに則りましょう。
1: トリガー
ボタンをhover して、クリックに繋がる様に促すには、どういうアニメーションにしたら良いでしょうか？
飛行機が離陸準備をしていることを連想させるアニメーションをつければ良さそうですね。
そのためには
1: 飛行機が角度が変わって、滑走路を動く可能様に、X軸方向に動く
2: ボタンが発射準備整ったら、エンジン吹いて揺れるかの様に、振動が起こる
3: 離陸準備が整ったことを、border-width を変えて表現する
では、やっていきましょう！
.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);
}
}
See the Pen Plane Button (experiment) by hiroya iizuka (@hiroyaiizuka) on CodePen.
animation-delay とtransform プロパティを使いました。
ちょっと振動がくどい場合は
.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);
}
}
See the Pen Plane Button (Experiment2) by hiroya iizuka (@hiroyaiizuka) on CodePen.
後者の方が、「micro」 なinteraction で、飛行機が飛びたくてうずうずしている表現が生まれ、クリックするトリガーになっています。
こっちの方がいいかもしれません。
飛行機が滑走路を移動し、到着し、エンジンをふかしたアニメーションを表現できました。
では次にといきたいところですが、長くなりそうなので、続きは次回にします。
それでは、また明日〜