Little Strange Software

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

【CSS】conic-gradientのアニメーション【実験】

conic-gradient
background-positionアニメーション

 

 

 どうも!LSSです!!

 

とりあえず試しに、conic-gradientをアニメーション化してみました。

 

コード

<style>
@keyframes cncglda{
0%,20%{background-position:0px 0px;}/*経過時間0~20%までの位置*/
80%,100%{background-position:-5700px -3800px;}/*経過時間80~100%までの位置*/
}
.cncgld{
width:300px;
height:200px;
background-image:repeating-conic-gradient(from 0deg at 50% 50%,black,brown,yellow,white,yellow,brown,black 36deg);/*開始角度0deg 横50% 縦50%の位置を中心とする、36degごとに繰り返すきんきらきんのきーんなconicグラデーション*/
background-size:6000px 4000px;/*幅6000px 高さ4000px という、バカでかい仮想の画像サイズ*/
animation:cncglda 10s linear infinite alternate;/*cncgldaというキーフレームを10秒かけてlinear再生。繰り返し回数inginite(無限)、一回再生後はalternate(逆再生)*/
}
</style>
<div class="cncgld">conic-gradient<br />background-positionアニメーション</div>

 

青文字はコメント部分で、削除しても動作に支障ありません。

削るとコードは↓こんな感じ。

 

<style>
@keyframes cncglda{
0%,20%{background-position:0px 0px;}
80%,100%{background-position:-5700px -3800px;}
}
.cncgld{
width:300px;
height:200px;
background-image:repeating-conic-gradient(from 0deg at 50% 50%,black,brown,yellow,white,yellow,brown,black 36deg);
background-size:6000px 4000px;
animation:cncglda 10s linear infinite alternate;
}
</style>
<div class="cncgld">conic-gradient<br />background-positionアニメーション</div>

 

横300px、縦200pxの枠に、背景画像として、

background-size:6000px 4000px;

幅6000px、縦4000pxというバカでかい仮想の画像を用意しています。

 

そしてそこに、

background-image:repeating-conic-gradient(from 0deg at 50% 50%,black,brown,yellow,white,yellow,brown,black 36deg);

で、このブログによく出てくるきんきらきんのきーんなグラデーションの扇形バージョンを描きました。

from 0deg は描画開始角度(そこから時計回りになります)、 at 50% 50% は扇形の中心点が縦横共に真ん中を指定(これはbackground-sizeで指定した6000x4000の中心、という事になります)。

 

 

linear-gradient、radial-gradientもそうでしたが、gradient系はCSSでは「関数」という扱いで、

background-image:〇〇-gradient(グラデーションの内容);

の ( ) 内はアニメーションに入れても途中を補完してくれないのですが、 background-position background-size は滑らかにアニメーションしてくれますね^^

 

今回の例でいうと、

0%,20%{background-position:0px 0px;}
最初のbackground-position:0px 0px;は、300x200の枠の左上を、6000x4000の背景画像の左上(0px 0px)に合わせたのが最初の状態。

そこから、6000x4000の背景画像の方を、

80%,100%{background-position:-5700px -3800px;}

左に5700px、上に3800px、ぐいっと動かしたような動きになっています。

 

 

 

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

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