【CSS】radial-gradientのサイズをアニメ変化させてみます【実験】
どうも！LSSです！！
に続く、gradient＋keyframes実験、radial-gradient版です。
linear-gradient の時は傾きを指定する箇所に「to left top」を指定する事で、「画像サイズの変化に応じて角度変化」という手法を実験しました。
では、radial-gradientの場合は？？
実験
コード
<style>
@keyframes rtesta{
0%,100%{background-size:10px 10px;}
40%,60%,80%{background-size:75px 75px;}
30%,50%,70%,90%{background-size:100px 100px;}
}
.rtest{
height:300px;
background-image:radial-gradient(farthest-side,#ffffff 5%,#00ffff 90%,#000000 99%,#00000000 100%);
background-position:50% 50%;
background-repeat:no-repeat;
animation:rtesta 5s linear infinite;
}
</style>
<div class="rtest"> </div>
解説
radial-gradientの場合、( ) 内の冒頭でサイズ指定する事ができます。
例えば、background-image:radial-gradient(50px 50px,black 99%,transparent 100%);とした場合。（この場合、50pxは半径のサイズになります）
↓
こんな円を描く事になります。
linear-gradient に to left top のように画像サイズに応じた設定があるように、radial-gradientにもいくつかのキーワードがあり、今回は「farthest-side」（中心からもっとも遠い辺までの距離を半径サイズとする指定）を使ってみました。
画像サイズの指定である、 background-size プロパティは keyframes によるスムーズなアニメ変化に対応しているので、
@keyframes rtesta{
0%,100%{background-size:10px 10px;}
40%,60%,80%{background-size:75px 75px;}
30%,50%,70%,90%{background-size:100px 100px;}
}
のように keyframes 内で background-size が変化するように書く事で、radial-gradientで描く円の大きさをアニメ変化させる事ができますね^^
組み合わせでこんな事も！
コード
<style>
@keyframes radialtestx{
0%,100%{background-position-x:0%;}
50%{background-position-x:100%;}
}
@keyframes radialtesty{
0%,100%{background-position-y:0%;}
50%{background-position-y:100%;}
}
@keyframes radialtestz{
0%,100%{background-size:100px 100px;}
50%{background-size:30px 30px;}
}
.radialtest{
height:300px;
background-image:radial-gradient(farthest-side,#ffffff 5%,#00ffff 90%,#000000 99%,#00000000 100%);
background-repeat:no-repeat;
animation:
radialtestx 7s linear infinite
,radialtesty 5s linear infinite
,radialtestz 3s ease-in-out infinite
;
}
</style>
<div class="radialtest"> </div>
の２種類目・３種類目で使った、「background-position-x と background-position-y を別々にkeyframesで指定する」ものに、更に今回の「background-size」を変化させるkeyframesを加えて、
animation:
radialtestx 7s linear infinite
,radialtesty 5s linear infinite
,radialtestz 3s ease-in-out infinite
;
と、再生時間を7秒・5秒・3秒と互いに倍数とならない３つの秒数をそれぞれに指定する事で、縦・横・奥にバウンドする動きに変化を持たせた感じになっています。
linear、radialときたら…
conic-gradient でも、こんな感じの事ができないかな？と思いましたが…特にこれっぽいキーワードもないっぽい？？（角度指定に「右上」とか指定できたら面白そうですが…）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
