CSSによる色のアニメーションはrgbとhslの指定で違いがあるか調べてみた

Facebook にシェア
Pocket

最近、ウェブサイトをいろいろ見ていて、このアニメーションの動きってどうしてるんだろうと思って調べてみると、CSSのtransisionの機能を使って実現しているというサイトが増えてきました(ちょっと前までアニメーションはjQueryで作っているところが多かった印象)。

自分も最近になってようやくその処理方法が分かってきたので、いつか実践で使ってみたいです。

ところで、このアニメーションですが、jQueryでは確か色の変更はアニメーションで実現できなかったと思うのですが、CSSのアニメーション機能はなんと色の変更まで実現できます。

そこで思ったのが、もしかしたら色をRGBで指定するのと、HSLで指定するのではアニメーションの変化が異なるのではないかと疑問。

例えば、RGBでの青の指定は『rgb(0,0,255)』、RGBでの黄色の指定は『rgb(255,255,0)』となりますが、HSLでの青の指定は『hsl(240, 100%, 50%)』、HSLでの黄色の指定は『hsl(60, 100%, 50%)』となるため。パット見、HSL指定だとHの色相部分だけの値を変えればいいだけなので、青から黄色に変化する場合は途中に緑色、つまり『hsl(150,100%,50%)』という値がでてくるのではないかと思いました。対してRGB指定だとrとgの値が増え、bの値が減るようになりそうなので途中に緑色『rgb(0,255,0)』はでてきそうにありません。

というわけで調べてみた。

HTML

CSS

JavaScript

青というラジオボタンをクリックしたら背景が青、黄色というラジオボタンをクリックしたら背景が黄色に5秒かけて変化するという処理をしています。アニメーションによる変化対象は背景色のみとしています(現在の処理だと、文字色はクリックと同時に変化しますが、CSSの『transition: background-color 5s;』を『transition: all 5s;』とすれば文字色もアニメーションで変化します)。色については左側の要素をRGB指定、右側の要素をHSL指定としています。

サンプル:CSS Color Animation

結果、全く同じように変化しました。RGB指定からHSL指定に変化することもできるわけだからそりゃそうか。

コメントを残す

メールアドレスが公開されることはありません。