CSS3アニメーションでつくるインターフェイス表現

第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>
図1 Google FontsのOswald
図1 Google FontsのOswald

<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 ボタンの静的なスタイル
図2 ボタンの静的なスタイル
コード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 ポインタを重ねると円が鼓動のようなアニメーションで伸縮する
図3 ポインタを重ねると円が鼓動のようなアニメーションで伸縮する
コード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);
}
図4 :after擬似要素で加えられた塗りの小さな円
図4 :after擬似要素で加えられた塗りの小さな円

塗りの円の: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;
    }
}
図5 ポインタを重ねると塗りの円がアニメーションで広がって伸縮する
図5 ポインタを重ねると塗りの円がアニメーションで広がって伸縮する

さらに、ボタンの中のテキスト<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);
}

おすすめ記事

記事・ニュース一覧