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

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

この記事を読むのに必要な時間:およそ 4 分

今回のお題は,前回に引き続き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;
}

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入