どうも!LSSです!!
昨日試してみた「CSS変数」ですが、ふと、思いついた事がありました。
「linear-gradient や radial-gradient って、アニメーション設定してもパッと切り替わるだけでアニメーションしなかったけど…もしかして、その中の値にCSS変数使える?
そして、その方法だとすり抜けて(?)アニメーションしたりして!?」
…と。
と、いうわけで、試してみたのですが…結論から言うと失敗です^^;
グラデーションがアニメーションしない
アニメーション…しない!
↑マウスカーソルを乗せると、光の大きさが変わります。
コード
<style><!--
.radgra{
--rd1:5%;
background-color:lightgreen;
background-image:radial-gradient(circle at 65% 35%,#ffffffff var(--rd1),#ffffff00);
width:300px;
height:200px;
border:15px outset lightgreen;
border-radius:30px;
padding:15px;
transition: 2s linear 0s;
}
.radgra:hover{
--rd1:35%;
}
--></style>
<div class="radgra">グラデーションが<br />アニメーション…しない!</div>
CSS変数が絡むところを赤文字、結果的に「あってもなくても同じ」行になってしまった、transitionを青文字にしています。
半分は成功…?
思いつきの前半部分、 radial-gradient の中の値を変数で指定する、は見事に成功しました!
--rd1:5%;
background-image:radial-gradient(circle at 65% 35%,#ffffffff var(--rd1),#ffffff00);
という記述ですが、これは、
background-image:radial-gradient(circle at 65% 35%,#ffffffff 5%,#ffffff00);
と書いたのと同じ事になります。
あと、色の置き換えも試してみましたが、そちらも一応はできました。
そしてそれを、
.radgra:hover{
--rd1:35%;
}
マウスカーソルが乗った時(:hover)には、変数の値が「35%」に変わるようにしたんですね。
この値を大きくすると、光が当たっているように見える部分が大きくなります。
…というところまでは、ちゃんと実現しました!
transitionが効いてない
transition: 2s linear 0s;
これは、「CSSの指定に変化があった時は、いきなり切り替わるのではなく、2秒かけて徐々に変化していく」という指定です。
つまり「じわじわと光が大きくなる」ような効果を期待したんですが…「いきなり切り替わって」しまってますね^^;
以前に、CSS変数を使わずに :hover に値を変えた
background-image:radial-gradient(circle at 65% 35%,#ffffffff 35%,#ffffff00);
を書いて、うまく行かない事は確認していたのですが、今回もやはりダメでした^^;;;
他のプロパティなら、CSS変数を使っていてもアニメーションします!
この radial-gradient 以外のところにCSS変数を用いて、:hover でCSS変数の値を変える…のは、ちゃんとアニメーションになってくれました!
って事は…恐らくですが、この書き方であっても、
「CSS変数の値が5%→6%→7%→(中略)→35%」
と変化するのではなく、
「CSS変数の値をプロパティに当てた上で、アニメ―ション変化が作られている」
…という事なのかな?
と、仮説を立ててみました。
グラデーションをアニメーション…やはり無理なのかな?
何か方法はあるのかな?
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^