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

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

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

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

: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);
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入