最近、ウェブサイトをいろいろ見ていて、このアニメーションの動きってどうしてるんだろうと思って調べてみると、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
<div id="form">
<label><input type="radio" name="type" id="radio_blue" checked>青</label>
<label><input type="radio" name="type" id="radio_yellow">黄色</label>
</div>
<div id="rgb" class="blue">
RGB:
</div>
<div id="hsl" class="blue">
HSV:
</div>
CSS
#rgb, #hsl{
width:50%;
box-sizing: border-box;
border:10px solid #ffffff;
padding:5px;
float:left;
transition: background-color 5s;
}
#rgb.blue{
background-color: rgb(0,0,255);
color:#ffffff;
}
#rgb.blue::after{
content: 'background-color: rgb(0,0,255)';
}
#rgb.yellow{
background-color: rgb(255,255,0);
color:#000000;
}
#rgb.yellow::after{
content: 'background-color: rgb(255,255,0)';
}
#hsl.blue{
background-color: hsl(240, 100%, 50%);
color:#ffffff;
}
#hsl.blue::after{
content: 'background-color: hsl(240, 100%, 50%)';
}
#hsl.yellow{
background-color: hsl(60, 100%, 50%);
color:#000000;
}
#hsl.yellow::after{
content: 'background-color: hsl(60, 100%, 50%)';
}
JavaScript
let colorEle = document.querySelectorAll('#rgb, #hsl'); //背景を変更する要素
//青のラジオボタンを押した時の動作
document.getElementById('radio_blue').addEventListener('click', function(){
Array.prototype.forEach.call(colorEle, function(item){
item.classList.remove('yellow');
item.classList.add('blue');
});
});
//黄色のラジオボタンを押した時の動作
document.getElementById('radio_yellow').addEventListener('click', function(){
Array.prototype.forEach.call(colorEle, function(item){
item.classList.remove('blue');
item.classList.add('yellow');
});
})
青というラジオボタンをクリックしたら背景が青、黄色というラジオボタンをクリックしたら背景が黄色に5秒かけて変化するという処理をしています。アニメーションによる変化対象は背景色のみとしています(現在の処理だと、文字色はクリックと同時に変化しますが、CSSの『transition: background-color 5s;』を『transition: all 5s;』とすれば文字色もアニメーションで変化します)。色については左側の要素をRGB指定、右側の要素をHSL指定としています。
サンプル：CSS Color Animation
結果、全く同じように変化しました。RGB指定からHSL指定に変化することもできるわけだからそりゃそうか。
コメント