第11回　鼓動のようにアニメーションするボタン

今回のお題は、前回に引き続きanimationプロパティを使う。transitionプロパティよりも細かくつくり込めるので、動き方を工夫し、ほかのアニメーションとも組み合わせると、魅力的な表現に仕上げられる。これからつくるのは、マウスポインタを重ねると鼓動のようにアニメーションするボタンだ（サンプル1⁠）⁠。デザインと動きは「Social button effects #1」を参考にさせていただいた。

サンプル1　CSS3: Puls effect of a button

円形の縁取りを与えたボタン

ボタンのテキストのフォントには、Google FontsのOswaldを用いた（図1⁠）⁠。また例によって、ベンダープレフィックスを省くため、<script>要素で-prefix-freeを読み込んである（第1回の「ベンダープレフィックスと-prefix-free」の項参照⁠）⁠。

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<script src="lib/prefixfree.min.js"></script>

<body>要素にはつぎのコード1のように、<div>要素（class属性"button"）の中に<a>要素（class属性"button-item"）を含め、さらにその中の<span>要素にテキストを書き加えた。

コード1ボタンの<div>要素に<a>要素を納めた<body>要素の記述

<div class="button">
    <a class="button-item" href="#">
        <span>Puls Button</span>
    </a>
</div>

<style>要素に以下のコード2のCSSを定めると、テキストを円形の縁で囲んだボタンがページに表れる（図2⁠）⁠。まだ、アニメーションはなにもない。縁は:before擬似要素で加えた。borderプロパティを与えるとともに、border-radiusプロパティの値を50%とすることで円形にしている。

コード2　:before擬似要素で円形の縁取りを与えたボタン

.button {
    position: absolute;
    display: flex;
    align-items: center;
    top: 50%;
    left: 50%;
    margin-left: -80px;
    margin-top: -80px;
    width: 160px;
    height: 160px;
    text-align: center;
}
.button:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    border: 1px solid deeppink;
    border-radius: 50%;
}
.button-item {
    color: deeppink;
    font-size: 40px;
    font-family: 'Oswald', sans-serif;
    line-height: 1em;
    text-decoration: none;
}
.button span {
    position: absolute;
    top: 1em;
}

ボタンの円形の縁取りを鼓動のようにアニメーションさせる

それでは、ボタンの円の縁取りに鼓動のようなアニメーションを加えよう。ボタン（class属性"button"）にマウスポインタが重なったとき（:hover擬似クラス）、縁の:before擬似要素に、つぎのようにanimationプロパティを定める。@keyframes規則（pop）には、始まりを0%、終わりを100%とするキーフレームを任意に決めて、それぞれにプロパティを与えればよい（第10回の「五角柱を水平に回す」参照⁠）⁠。transformプロパティにscale()関数で伸縮させて、鼓動のようなアニメーションを表現した（図3⁠）⁠。ひとまず、ここまでのCSSの定めを以下のコード3にまとめた。

.button:hover:before {
    animation: pop 0.5s;
}

@keyframes pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    90% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

コード3　ボタンの縁の円を鼓動のようにアニメーションさせる

.button {
    position: absolute;
    display: flex;
    align-items: center;
    top: 50%;
    left: 50%;
    margin-left: -80px;
    margin-top: -80px;
    width: 160px;
    height: 160px;
    text-align: center;
}
.button:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    border: 1px solid deeppink;
    border-radius: 50%;
}
.button:hover:before {
    animation: pop 0.5s;
}
@keyframes pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    90% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
.button-item {
    color: deeppink;
    font-size: 40px;
    font-family: 'Oswald', sans-serif;
    line-height: 1em;
    text-decoration: none;
}
.button span {
    position: absolute;
    top: 1em;
}

塗りの円を中心から広げてアニメーションさせる

:after擬似要素でもうひとつ塗りの円を加える。線が塗りになるほかは、:beforeと同じ初期設定だ。それを、transformプロパティにscale()関数で小さく縮めておく（図4⁠）⁠。マウスポインタを重ねたら、塗りの円が広がるアニメーションにしよう。

.button:before, .button:after {
    /* 初期設定 */
}
.button:after {
    background-color: deeppink;
    transform: scale(0.1);
}

塗りの円の:after擬似要素にanimationプロパティで、つぎのように別の@keyframes規則（pulse）を与えた。また、始めのopacityプロパティは0にしておく。アニメーションには伸縮に加え、不透明度（opacityプロパティ）も変えている。これで、ボタンにマウスポインタを重ねると、塗りの円も中心から広がって伸縮する（図5⁠）⁠。なお、animation-fill-modeプロパティをforwardsにすると、アニメーションが終わってもそのまま、もとの表示には戻らない。

.button:after {

    opacity: 0;
    transform: scale(0.1);
}

.button:hover:after {
    animation: pulse 0.5s;
    animation-fill-mode: forwards;
}

@keyframes pulse {
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    70% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

さらに、ボタンの中のテキスト（<span>要素）にも、transitionプロパティでつぎのようにちょっとしたアニメーションを加える。マウスポインタを重ねると、文字の色が白になり、浮くように少し上に動く。なお、テキストが塗りの円の裏に隠れないよう、z-indexプロパティを定めた。

.button span {

    z-index: 1;
    transition: 0.5s;
}
.button:hover span {
    color: white;
    transform: translateY(-5px);
}

これでボタンにマウスポインタを重ねると、円の縁と塗りが鼓動のようにアニメーションするようになった。テキストも少し浮き上がって白抜きに変わる。@keyframes規則のキーフレームの定めが細かいとはいえ、設定そのものはさほどむずかしくないだろう。また、円の縁と塗りで異なるアニメーションを組み合わせたことにより、表現力が増した。書き上げたCSSの定めは、つぎのコード4にまとめたとおりだ。

コード4　ボタンの縁と塗りの円を鼓動のようにアニメーションさせる

.button {
    position: absolute;
    display: flex;
    align-items: center;
    top: 50%;
    left: 50%;
    margin-left: -80px;
    margin-top: -80px;
    width: 160px;
    height: 160px;
    text-align: center;
}
.button:before, .button:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    border: 1px solid deeppink;
    border-radius: 50%;
}
.button:after {
    background-color: deeppink;
    opacity: 0;
    transform: scale(0.1);
}
.button:hover:before {
    animation: pop 0.5s;
}
.button:hover:after {
    animation: pulse 0.5s;
    animation-fill-mode: forwards;
}
@keyframes pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    90% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes pulse {
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    70% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.button-item {
    color: deeppink;
    font-size: 40px;
    font-family: 'Oswald', sans-serif;
    line-height: 1em;
    text-decoration: none;
}
.button span {
    position: absolute;
    top: 1em;
    z-index: 1;
    transition: 0.5s;
}
.button:hover span {
    color: white;
    transform: translateY(-5px);
}