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

第14回　周囲が勢いよく回転するボタン

CSS, アニメーション

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

今回のお題は，ボタンのアニメーションだ。マウスポインタを重ねると，周囲が勢いよく回る（サンプル1）⁠。「⁠Button Spinner Test」のデザインとアニメーションをもとに，コードは絞り込んでわかりやすく組み立て直した。animationプロパティで細かい動きをつくり込んでいる。

サンプル1　CSS3CSS3: Button Spinner

ボタンをつくる要素と静的なスタイル

HTMLドキュメントの<body>要素に加えるボタンをつくる要素の記述と，アニメーションを与える前の静的なスタイルはコード1のとおりだ（図1）⁠。Google FontsのRalewayを使っている。また，<script>要素に-prefix-freeを読み込んで，ベンダープレフィックスは省いた（第1回の「ベンダープレフィックスと-prefix-free」の項参照）⁠。

図1　ボタンの静的なスタイル

図1　ボタンの静的なスタイル

コード1　ボタンをつくる<body>と<head>要素のCSSの定め

<body>要素

<div class="container">
    <div class="circle">
        <div class="spinner">
        </div>
        <div class="label">
            <p>Button</p>
        </div>
    </div>
</div>

<head>要素

<link href="https://fonts.googleapis.com/css?family=Raleway:400,900" rel="stylesheet">
<style>
html {
    background-color: steelblue;
}
.container {
    margin: 150px auto;
    text-align: center;
    background-color: steelblue;
}
.circle {
    background-color: black;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
}
.spinner {
    background-color: #efefef;
    height: 50px;
    margin-top: 75px;
}
.label {
    background-color: cornflowerblue;
    height: 190px;
    width: 190px;
    position: relative;
    margin: -120px auto;
    border-radius: 50%;
}
.label p {
    text-align: center;
    margin: 40% auto;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    font-size: 24pt;
}
</style>
<script src="lib/prefixfree.min.js"></script>

ボタンにマウスポインタが重なったときのアニメーション

ボタンにマウスポインタが重なったときの基本的なアニメーションを加えよう。ボタンの縁として見える大もとの要素（class属性"circle"）は，以下のようにはじめ背景と同じ色（steelblue）にしておき，:hover擬似クラスで白に変える。内側（class属性"label"）は背景色を明るい青（lightsteelblue）に，テキストは白にした。アニメーションはtransitionプロパティで定めている。ボタンの縁には待ち時間を加えたので，少しためてから動き始める。

transition: アニメーション時間 タイミング関数 待ち時間

.circle {
    background-color: steelblue /* black */;

    transition: 1s ease-in-out;
}

.circle:hover .label {
    background-color: ;
    transition: 0.3s ease-in-out;
}
.circle:hover .label p {
    color: white;
    transition: 0.3s ease-in-out;
}
.circle:hover {
    background-color: white;
    transition: 1s ease-in-out 0.8s;
}
.label {

    transition: 0.3s ease-in-out;
}
.label p {

    transition: 0.3s ease-in-out;
}

これで，ボタンにマウスポインタを重ねると，内側の色が明るく変わりテキストは白くなる。そして，白い縁が広がるように表れる（図2）⁠。スタイルの定めは以下にコード2としてまとめた。

図2　マウスポインタを重ねるとアニメーションするボタン

図2　マウスポインタを重ねるとアニメーションするボタン

コード2　ボタンにマウスポインタを重ねたときのアニメーションの定め

html {
    background-color: steelblue;
}
.container {
    margin: 150px auto;
    text-align: center;
    background-color: steelblue;
}
.circle {
    background-color: steelblue;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    transition: 1s ease-in-out;
}
.spinner {
    background-color: #efefef;
    height: 50px;
    margin-top: 75px;
}
.circle:hover .label {
    background-color: lightsteelblue;
    transition: 0.3s ease-in-out;
}
.circle:hover .label p {
    color: white;
    transition: 0.3s ease-in-out;
}
.circle:hover {
    background-color: white;
    transition: 1s ease-in-out 0.8s;
}
.label {
    background-color: cornflowerblue;
    height: 190px;
    width: 190px;
    position: relative;
    margin: -120px auto;
    border-radius: 50%;
    transition: 0.3s ease-in-out;
}
.label p {
    text-align: center;
    margin: 40% auto;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    font-size: 24pt;
    transition: 0.3s ease-in-out;
}

CSS, アニメーション

著者プロフィール

野中文雄（のなかふみお）

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

URL：http://www.FumioNonaka.com/

著書