今回から、デザインの勉強を始めるために、
CSS animation を作っていきたいと思います。
医療現場の課題を解決するためには、
アートとデザインとITの力が必要です。
毎日1作品を目標に、
CSS animation を発信していきます。
ではやってきます！
#1. heartbeat
早速ですが、完成版はこちら
なぜやるか？
弁膜症の治療方法と手術適応をすぐに判断できるReact SPAを開発中ですが、microinteraction を取り入れて、UX を向上したいためです。
この心拍動をボタンに取り入れて、onClickで設定し、Google Material design のFab ボタンのように右下に置いて、ページ遷移したい時に使えそうです。
##どうやるか？
参考にしたのは
こちら です。
では、やっていきましょう！
動きを分解する
・scale が異なるものを3つ作り、それらをアニメーションでつなげれば良さそうです。
・動きの特徴としては、最初と最後をゆっくり余韻をつけ、真ん中は早く素早く大きさを変えれば良さそうです！
→ ease - in -out ！
尚、イージングとは
・ linear (一定)
・ ease-in (ゆっくり始まる)
・ ease-out (ゆっくり終わる)
・ ease-in-out (ゆっくり始まって、ゆっくり終わる)
に大雑把に分かれます。
cubic-bezier(ベジェ曲線)によって、細かく自分で設定することもできます。
試してみたい方は、こちら を参照ください。
##コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="heartbeat"></div>
</body>
</html>
.heartbeat{
width: 100px;
height: 100px;
background: #000;
margin: 30px auto;
border-radius: 50%;
animation: heartbeat 1.5s ease-in-out infinite both;
}
@keyframes heartbeat{
from{
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
10%{
transform: scale(0.91);
animation-timing-function: ease-in;
}
17%{
transform: scale(0.98);
animation-timing-function: ease-out;
}
33%{
transform: scale(0.87);
animation-timing-function: ease-in;
}
45%{
transform: scale(1);
animation-timing-function: ease-out;
}
}
補足説明
・CSS animation の一括指定プロパティ
前から順に、以下のように設定できます。
・animation-name: 指定値
・animation-duration: 指定値
・animation-timing-function: 指定値
・animation-delay: 指定値
・animation-direction: 指定値
・animation-iteration-count: 指定値
・animation-fill-mode: 指定値
・animation-play-state: 指定値
参考： MDN animation
・transform-origin プロパティは、 変形する時の原点を指定する時に使います。
この場合だと、円の中央から変形したいので、center になり、2つ値を設定することで、１番目: 水平方向、2番目: 垂直方向 と設定できます。
transform-origin: right bottom と設定すると、以下のような動画となります。
変形の中心が右下にずれてますね。
今回は、以上となります。
keyframe でこのように細かく設定すれば、このような心拍動も簡単に再現できますね。
それでは〜