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

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

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

今回のお題は,ボタンのアニメーションだ。マウスポインタを重ねると,周囲が勢いよく回るサンプル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;
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入