CSS animation day40 となりました。
前回 の続きである、Submit Button を完成させましょう。
1. 完成版
See the Pen Plane Button by hiroya iizuka (@hiroyaiizuka) on CodePen.
2. 参考文献
3. 分解してみる
❶.
マクロインタラクションの4つのstepである 3: フィードバック からやっていきましょう。
ボタンをクリックしたら、飛行機が離陸するアニメーションをつけたいのですが、どうしたら良いでしょうか？
1: 飛行機が飛び立つ
2: テキストが変わる。(人間味が感じられるテキストだとbetter)
3: ボタンが動く
などが考えられます。
まずは、「クリックしたら」を、Javascript なしで表現しましょう。
以前の記事 を参考にして、:checked で実装します。
<!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>
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);
}
}
いい感じですね！
❷.
改善点として、Send ボタンが、「今、送ったよ！」 ということを、ユーザーに教えるフィードバックが足りてません。
Send を Sent !! に変えましょう！ (!! で、人間味を出します。)
これは、beforeクラスを用いれば実現できそうです。
.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;
}
元のテキストは、クリックされると fontSizeが 0pxになり、
:beforeクラスの fontSize 0px のテキストが、クリックされると28px になる様に設定しました。
❸.
では、クリックしてボタンが動く様にしましょう。
どう動けば良いでしょうか？
飛行機が飛び立つ時に、爆風がおこると仮定すると、ボタンは後ろに吹き飛ばされます。このイメージをアニメーションで作りましょう。
# start:checked ~ label .button {
font-size: 0;
animation: moveButton 0.6s ease;
}
@keyframes moveButton {
50% {
margin-right: 60px;
}
}
いい感じです！
ただ、まだフィードバックが足りてません。
ボタンの背景カラーと、文字の色をクリックして変わる様にしましょう。
# 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;
}
いい感じです！
これで、ユーザーは送ったぞ！ という、フィードバックがよく伝わります。
マイクロインタラクションの4つのstep を意識して作ると、
大変素敵なアニメーションが作れますね。
それでは、また明日〜