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

第20回 トグルスイッチのアニメーション

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

トグルスイッチをスライドする

アニメーションする要素はふたつある。そのうちのつまみの擬似要素::afterを先に動かそう。チェックボックスclass属性"switch")がチェックされたら:checked擬似クラス⁠⁠,以下のように右にスライドさせる図2⁠。transitionプロパティにはアニメーションの時間のみ与えた。タイミング関数は,デフォルトのeaseが用いられることになる。

これで,動きは済むはずだ。だが,box-shadowプロパティも少し変えている。内側inset右に青白さを加えたので,明かりに照らされたようになった。この表現の意味は,つぎの項で明らかになる。

<style>要素

.toggle::after {

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 8px rgba(0, 0, 0, 0.3),
        0 12px 12px rgba(0, 0, 0, 0.4);
    transition: 0.5s;
}
.switch:checked ~ .toggle::after {
    left: 63%;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),  /* 変化なし */
        0 0 8px rgba(0, 0, 0, 0.3),  /* 変化なし */
        0 8px 8px rgba(0, 0, 0, 0.3),  /* 影のぼけが弱まる */
        inset -1px 0 1px #b9f3fe;  /* 青みがかった白が内側右に加わる */
}

図2 トグルスイッチがクリックでスライドする

図2 トグルスイッチがクリックでスライドする

インジケータを光らせる

アニメーションさせるふたつめのインジケータの擬似要素::beforeを光らせよう。オフは暗く,オンで青みがかった白に変える。陰影box-shadowの設定は,つぎのように少し細かい。あまり変わらない影もあるものの,青みのかった白い光彩が透明から不透明になって表れたり,色が黒から青みがかった白に移ったりしている。背景色backgroundのグラデーションlinear-gradient()も白を強めた。transitionプロパティの定めは,前項のつまみと同じだ。

<style>要素

.toggle::before {

    background: linear-gradient(#36455b, #283446);
    box-shadow:
        inset 0 1px 0 rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 10px rgba(185, 231, 253, 0),
        inset 0 0 8px rgba(0, 0, 0, 0.9),
        inset 0 -2px 5px rgba(0, 0, 0, 0.3),
        inset 0 -5px 5px rgba(0, 0, 0, 0.5);
    transition: 0.5s;
}

.switch:checked ~ .toggle::before {
    background: linear-gradient(#ffffff, #77a1b9);
    box-shadow:
        inset 0 1px 0 rgba(0, 0, 0, 0.1),  /* 黒い影が薄まる */
        0 1px 0 rgba(255, 255, 255, 0.1),  /* 変化なし */
        0 0 10px rgba(100, 231, 253, 1),  /* 青みがかった白が表れる */
        inset 0 0 8px rgba(61, 157, 247, 0.8),  /* 黒から青みがかった白に */
        inset 0 -2px 5px rgba(185, 231, 253, 0.3),  /* 黒から青みがかった白に */
        inset 0 -3px 8px rgba(185, 231, 253, 0.5);  /* 黒から青みがかった白が広がる */
 }

これでトグルスイッチをクリックすると,つまみが左右にスライドするとともにインジケータも点滅するようになった。つまみが右に移ったときインジケータは光るので,つまみの右が照らされる図3⁠。前項でつまみに加えた内側右が明るくなる変化は,これを表現したかったわけだ。冒頭のサンプル1を改めてたしかめてほしい。スイッチの現実感が増しているだろう。書き上がったCSSの定めは,以下のコード2にまとめたとおりだ。

図3 インジケーターが点灯してつまみを照らす

図3 インジケーターが点灯してつまみを照らす

コード2 トグルスイッチのスライドするつまみとインジケータ

body {
    background: #202838;
}
.container {
    width: 180px;
    height: 55px;
    position: relative;
    margin: 100px auto;
}
.switch {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}
.toggle {
    display: block;
    width: 80%;
    height: 100%;
    position: relative;
    cursor: pointer;
    border-radius: 30px;
    background: linear-gradient(#121823, #161d2b);
    box-shadow:
        inset 0 3px 8px 1px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.2);
}
.toggle::before {
    content: "";
    display: inline-block;
    position: absolute;
    right: -36px;
    top: 17px;
    width: 18px;
    height: 18px;
    border-radius: 10px;
    background: linear-gradient(#36455b, #283446);
    box-shadow:
        inset 0 1px 0 rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 10px rgba(185, 231, 253, 0),
        inset 0 0 8px rgba(0, 0, 0, 0.9),
        inset 0 -2px 5px rgba(0, 0, 0, 0.3),
        inset 0 -5px 5px rgba(0, 0, 0, 0.5);
    transition: 0.5s;
}
.toggle::after {
    content: "";
    height: 51px;
    width: 51px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: inherit;
    background: linear-gradient(#36455b, #283446);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 8px rgba(0, 0, 0, 0.3),
        0 12px 12px rgba(0, 0, 0, 0.4);
    transition: 0.5s;
}
.switch:checked ~ .toggle::before {
    background: linear-gradient(#ffffff, #77a1b9);
    box-shadow:
        inset 0 1px 0 rgba(0, 0, 0, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 10px rgba(100, 231, 253, 1),
        inset 0 0 8px rgba(61, 157, 247, 0.8),
        inset 0 -2px 5px rgba(185, 231, 253, 0.3),
        inset 0 -3px 8px rgba(185, 231, 253, 0.5);
 }
.switch:checked ~ .toggle::after {
    left: 63%;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 8px rgba(0, 0, 0, 0.3),
        0 8px 8px rgba(0, 0, 0, 0.3),
        inset -1px 0 1px #b9f3fe;
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書