分12トグルスイッチをスライドするアニメーションする要素はふたつある。そのうちのつまみの擬似要素(::after)を先に動かそう。チェックボックス(class属性"switch")がチェックされたら(:checked擬似クラス⁠)⁠,以下のように右にスライドさせる(図2⁠)⁠。transitionプロパティにはアニメーションの時間のみ与えた。タイミング関数は,デフォルトのeaseが用いられることになる。これで,動きは済むはずだ。box-shadowプロパティも少し変えている。内側(inset)右に青白さを加えたので,明かりに照らされたようになった。この表現の意味は,つぎの項で明らかになる。トグルスイッチがクリックでスライドするインジケータを光らせるアニメーションさせるふたつめのインジケータの擬似要素(::before)を光らせよう。オフは暗く,オンで青みがかった白に変える。陰影(box-shadow)の設定は,つぎのように少し細かい。変わらない影もあるものの,青みのかった白い光彩が透明から不透明になって表れたり,色が黒から青みがかった白に移ったりしている。背景色(background)のグラデーション(linear-gradient())も白を強めた。transitionプロパティの定めは,前項のつまみと同じだ。}これでトグルスイッチをクリックすると,つまみが左右にスライドするとともにインジケータも点滅するようになった。つまみが右に移ったときインジケータは光るので,つまみの右が照らされる(図3⁠)⁠。前項でつまみに加えた内側右が明るくなる変化は,これを表現したかったわけだ。冒頭のサンプル1を改めてたしかめてほしい。スイッチの現実感が増しているだろう。書き上がったCSSの定めは,以下のコード2にまとめたとおりだ。