CSS animation で遊び倒す　- heartbeat -

6913 ワード
CSS アニメーション CSS テキストリンク

今回から、デザインの勉強を始めるために、　

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(ベジェ曲線)によって、細かく自分で設定することもできます。
試してみたい方は、こちら を参照ください。

コード

index.html
<!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>
styles.css

.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 でこのように細かく設定すれば、このような心拍動も簡単に再現できますね。

それでは〜