Little Strange Software

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

【CSS】radial-gradientのサイズをアニメ変化させてみます【実験】

 どうも!LSSです!!

 

little-strange.hatenablog.com

に続く、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>

 

little-strange.hatenablog.com

の2種類目・3種類目で使った、「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秒と互いに倍数とならない3つの秒数をそれぞれに指定する事で、縦・横・奥にバウンドする動きに変化を持たせた感じになっています。

 

 

linear、radialときたら…

conic-gradient でも、こんな感じの事ができないかな?と思いましたが…特にこれっぽいキーワードもないっぽい??(角度指定に「右上」とか指定できたら面白そうですが…)

 

 

 

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

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