Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS・つまづき?】やはり…グラデーションはアニメできないのかな?

 どうも!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変数の値をプロパティに当てた上で、アニメ―ション変化が作られている」
…という事なのかな?

と、仮説を立ててみました。

 

グラデーションをアニメーション…やはり無理なのかな?
何か方法はあるのかな?

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^