どうも！LSSです！！
CSSをいじっているうちに、また謎のアニメーションができました。
光の龍…？
コード
<style>
@keyframes stardragonx{
0%{background-position-x:0%;}
100%{background-position-x:100%;}
}
@keyframes stardragony{
0%{background-position-y:0%;}
100%{background-position-y:100%;}
}
.stardragon{
position:relative;
height:200px;
background-color:black;
}
.stardragon div{
position:absolute;
top:0;left:0;
width:100%;height:100%;
background-repeat:no-repeat;
background-image:radial-gradient(farthest-side,#ffffff80 0%,#ffffff00 100%);
background-size:var(--sz) var(--sz);
animation:
stardragonx 3.5s ease-in-out var(--d) infinite alternate
,stardragony 1.07s ease-in-out var(--d) infinite alternate;
}
.stardragon div:nth-child(1){--d:0.1s;--sz:60px;}
.stardragon div:nth-child(2){--d:0.2s;--sz:56px;}
.stardragon div:nth-child(3){--d:0.3s;--sz:52px;}
.stardragon div:nth-child(4){--d:0.4s;--sz:48px;}
.stardragon div:nth-child(5){--d:0.5s;--sz:44px;}
.stardragon div:nth-child(6){--d:0.6s;--sz:40px;}
.stardragon div:nth-child(7){--d:0.7s;--sz:36px;}
.stardragon div:nth-child(8){--d:0.8s;--sz:32px;}
.stardragon div:nth-child(9){--d:0.9s;--sz:28px;}
.stardragon div:nth-child(10){--d:1s;--sz:24px;}
.stardragon div:nth-child(11){--d:1.1s;--sz:20px;}
.stardragon div:nth-child(12){--d:1.2s;--sz:16px;}
</style>
<div class="stardragon">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
仕組み
【CSS】回転体を増やした疑似３D - Little Strange Software
と
【おまけ】疑似３D、再生時間をずらすと…？ - Little Strange Software
の合わせ技のようなものです。（今回は疑似３Dからは脱却していますが）
まず、
<div class="stardragon">
の子要素として、空のdivタグが12個入っています。
その12個のdivタグに対して、
.stardragon div:nth-child(1){--d:0.1s;--sz:60px;}
.stardragon div:nth-child(2){--d:0.2s;--sz:56px;}
.stardragon div:nth-child(3){--d:0.3s;--sz:52px;}
.stardragon div:nth-child(4){--d:0.4s;--sz:48px;}
.stardragon div:nth-child(5){--d:0.5s;--sz:44px;}
.stardragon div:nth-child(6){--d:0.6s;--sz:40px;}
.stardragon div:nth-child(7){--d:0.7s;--sz:36px;}
.stardragon div:nth-child(8){--d:0.8s;--sz:32px;}
.stardragon div:nth-child(9){--d:0.9s;--sz:28px;}
.stardragon div:nth-child(10){--d:1s;--sz:24px;}
.stardragon div:nth-child(11){--d:1.1s;--sz:20px;}
.stardragon div:nth-child(12){--d:1.2s;--sz:16px;}
と、２つのCSS変数を設定し、「--d」は0.1秒づつ、「--sz」は4pxづつ、順に ずらしています。
「--d」は、
animation:
stardragonx 3.5s ease-in-out var(--d) infinite alternate
,stardragony 1.07s ease-in-out var(--d) infinite alternate;
とアニメーション呼び出し時に遅延として使用しているため、12個のdivタグが それぞれ１つ前のものより0.1秒遅れてついていく事になってるんですね。
「--sz」は、
background-size:var(--sz) var(--sz);
と背景サイズとして使用しているため、12個のdivタグが それぞれ１つ前のものより4pxづつ小さくなっていっています。
あとは、横移動アニメーション、縦移動アニメーションの再生時間を、
animation:
stardragonx 3.5s ease-in-out var(--d) infinite alternate
,stardragony 1.07s ease-in-out var(--d) infinite alternate;
という感じで「ビミョーに噛みあわないタイミング」にする事で、「なかなか同じ動きの繰り返しにならない」のたうちまわり方になっています^^
どうしてこうなった
こうなる前には、コメントでいただいた「蛍」をやってみようかと考えていました。
nth-childの「2n+1」のような指定を組み合わせて云々…と実現できそうな方法も考えていたところでふと、「均等に遅延をずらすと、追尾しているような動きもできそう」と思いついてしまい、試してみたのが今回のネタです^^;
龍と呼んでいいのかは…謎ですがｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
