2020
06.01

CSS transitionの話

コーディング

コーダーの北條(利)です。

私の方は、サイトを制作するときの雑感などを書き綴っていこうと思います。
第一回目は、CSS transitionの話です。

transitionというのは、サイトで、画像やテキストなどがふわっと出てきたりするのをよく見ると思いますが、あの「ふわっと」を作り出すCSSのプロパティです。非常に短い時間ですが、極めて効果的ですよね?

この非常に短い、10分の1秒、100分の1秒という単位の話は、スポーツなどではよく出てきます。

いつの間にか、ずいぶん昔の話になリましたが、2009年、世界陸上競技選手権の100メートル走で、ウサイン・ボルトが、今後も当分破られそうもない9秒58の世界記録を出したとき、2位に入ったタイソン・ゲイのタイムは9秒71でした。その差は0.13秒です。

それから遡ること21年の1988年、ソウル五輪であのベン・ジョンソンが、当時衝撃的な幻の世界記録となった9秒79を出したときも、2位のカール・ルイスとの差は 0.13秒でした。
わずか0.13秒ですが、1m以上の差に見えました。こういう競技では0.13秒は大変な差なのでしょうね。。完敗を悟ったルイスの表情が印象に残っています。

オリンピック等は毎回楽しみにしているので、やはり今回はちょっと残念です。
自分の場合、日本人選手を応援するというよりは、世界の個性的で魅力ある選手が見られるところに面白さを感じています。その意味で、テレビでは世界陸上の織田裕二さんの解説などは好感を持っています。

さて、日常生活ではこういう単位を意識することはありませんでしたが、Webのコーディングをするようになってからは、しばしば意識するようになりました。

例えば、白黒の写真をマウスオーバーするとカラーに変わるような動きを作るとき、白黒の写真とカラー写真を用意して、jQueryで切り替えるという方法があります。

ただ、これだと0秒で切り替わるので、やはり違和感があります。
0秒で切り替わるということは、自然界ではありえないからでしょうね。
CSS3の transitionプロパティは、この一瞬の「妙なる間」を作りだすことができます。

上の写真の例だと、カラー写真だけを用意して、filterというプロパティでgrayscaleを100%から0%に変えます。これをtransitionを使うことでスムースな変化を実現できます。

ノースサインのサイトでは、「COMPANY」のメンバーの写真で使っています。
遷移時間は0.3秒に設定しています。
ちなみに、0.13秒という数値も試してみましたが、少し早すぎるようでした。(笑)

この場合に限らず、transitionプロパティでは、遷移時間を、0.2秒、0.3秒、0.4秒といろいろ変えて試していますが、0.1秒違うと印象も全く変わってくるので、人間の目は凄いなとあらためて驚かされます。

お客様のサイトを制作する際にも、この0.1秒にこだわり、できるだけ滑らかで美しい動きを心がけておりますので、どうぞよろしくお願いいたします。

記 北條(利)