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

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

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

ボタンの周囲を回るアニメーション

残るは,ボタンの左右両側に見える要素class属性"spinner")を,以下のようにマウスポインタが重なったとき回す@keyframes規則clockwise)。マウスポインタが外れたときの逆回しも,併せてanimationプロパティに定めた@keyframes規則anti-clockwise)。:hover擬似クラスには,少し遅れた拡大のアニメーションも加えてある@keyframes規則scale)。それぞれの@keyframes規則は後で示そう。

さらに,マウスポインタを重ねたときには,ボタンの左右両側の要素class属性"spinner")filterプロパティblur()関数でぼかした。引数にはぼけ幅を渡す。また,cubic-bezier()はタイミング関数を4つの引数で定める。引数の与え方と値がどう変わるかについては,次項で補おう。

.circle {

    opacity: 0.99;

}
.spinner {

    animation: anti-clockwise 1s ease-in-out;
    transform: scaleY(2);
}

.circle:hover .spinner {
    filter: blur(5px);
    animation: clockwise 1s cubic-bezier(1, 0.22, 1, 0.92),
        scale 2s 1s ease-in-out;
}

回転の時計回り(clockwise)と反時計回り(anti-clockwise)および拡大(scale)@keyframesは,それぞれつぎのとおりだ(第10回の五角柱を水平に回す参照)。回転角に360度より大きい値を与えれば1周以上くるくると回ることになる。これで,お題のアニメーションはでき上がった。ボタンにマウスポインタを重ねると,周囲が広がりながら,左右の要素はくるくると回る図3)。スタイルの定めは以下のコード3にまとめた。

@keyframes clockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1080deg);
    }
}
@keyframes anti-clockwise {
    from {
        transform: rotate(1080deg);
    }
    to {
        transform: rotate(0deg);
    }
}
@keyframes scale {
    from {
        transform: scaleY(2);
    }
    to {
        transform: scaleY(4);
    }
}

図3 ボタンにマウスポインタを重ねると左右の要素がくるくる回る

図3 ボタンにマウスポインタを重ねると左右の要素がくるくる回る

コード3 ボタンにマウスポインタが重なったとき周囲を回す

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;
    opacity: 0.99;
    transition: 1s ease-in-out;
}
.spinner {
    background-color: #efefef;
    height: 50px;
    margin-top: 75px;
    animation: anti-clockwise 1s ease-in-out;
    transform: scaleY(2);
}
.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 .spinner {
    filter: blur(5px);
    animation: clockwise 1s cubic-bezier(1, 0.22, 1, 0.92),
        scale 2s 1s ease-in-out;
}
@keyframes clockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1080deg);
    }
}
@keyframes anti-clockwise {
    from {
        transform: rotate(1080deg);
    }
    to {
        transform: rotate(0deg);
    }
}
@keyframes scale {
    from {
        transform: scaleY(2);
    }
    to {
        transform: scaleY(4);
    }
}
.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;
}

cubic-bezier()関数とopacityプロパティの役割

cubic-bezier()関数について,補っておく。この関数は4つの引数でタイミング関数を定める。xy座標平面で始点が(0, 0),終点は(1, 1)として,ベジエ曲線の各コントロールポイントのxy座標値を,つぎのようにcubic-bezier()関数に渡す。たとえば,デフォルトの関数キーワードeaseは,cubic-bezier(0.25, 0.1, 0.25, 1.0)を表す。

cubic-bezier(x1, y1, x2, y2)

Cubic Bezier Generatorcubic-bezier()関数の4つの引数値を入力すると,値の変わり方がグラフで示される。前掲コード3で用いたcubic-bezier(1, 0.22, 1, 0.92)を試すと,つぎの図4のようにease-inにもっとめりはりを利かせた曲線になる。

図4 「Cubic Bezier Generator」で描いたcubic-bezier(1, 0.22, 1, 0.92)のグラフ

図4 「Cubic Bezier Generator」で描いたcubic-bezier(1, 0.22, 1, 0.92)のグラフ

もうひとつ,ボタンの大もとの要素(class属性"circle")opacityプロパティをなぜ加えたのか,疑問に思われたかもしれない。つぎのように,このプロパティを与えないと,実はボタンの左右の要素のアニメーションが,マウスポインタを重ねたとき円形の外側にはみ出してしまう図5。そこで,opacityプロパティを不透明(1)に近い数値(0.99)とした。

.circle {

    /* opacity: 0.99; */

}

図5 左右の要素が円形の外にはみ出す

図5 左右の要素が円形の外にはみ出す

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入