【おまけ】疑似３D、再生時間をずらすと…？
どうも！LSSです！！
【CSS】疑似３D【実験】 - Little Strange Software
で、楕円（っぽい）動きで３D（っぽい）ものを表現してみました。
記事中で、「最初だけ発生する遅延を変更するとどうなるか」を書いていましたが、他に「横の動き」と「縦の動き＋サイズ変更」を指定する秒数を変えてみたらどうなるか？を試してみます。
2sと1.8s
コード
<style>
@keyframes d3dax{
0%{background-position-x:0%;}
100%{background-position-x:100%;}
}
@keyframes d3day{
0%{background-position-y:0%;background-size:20px 20px;}
100%{background-position-y:100%;background-size:90px 90px;}
}
.d3d{
height:200px;
background-color:black;
background-image:radial-gradient(farthest-side,#ffffff,#bbbbbb 39.9%,#4444ffdd 40%,#4444ff00 100%);
background-repeat:no-repeat;
animation:
d3dax 2s ease-in-out infinite alternate
,d3day 1.8s ease-in-out infinite alternate;
}
</style>
<div class="d3d"> </div>
遅延の指定を無くし、「横の動き」を2s（２秒）、「縦の動き＋サイズ変更」を1.8s（1.8秒）にしてみました。
1周ごとに0.2秒（alternateによる往復で0.4秒）づつずれ、10周で一周分のズレになるような指定にすると↑のようになります。
2sと1s
前述のコードの1.8sを1sに変更すると↑こうなります。
ちょうど倍数なもので、周ごとの変化はなく、あまり面白みがないですね^^;
2sと3s
次に3sにしてみました（縦の動き＋サイズ変更の方がゆっくり）。
ちょっとまた動きの雰囲気が変わりました。
最小公倍数が6なので、3往復と2往復で周期が合う事から、「ちょっと変わってるけどまだ単調」な感じの動きですね。
神戸市の市章っぽくもありますｗ
2sと6s
さらに大きく変更してみました。
倍数であり、ちょうど3倍となる数値だとこうなります。
縦の動きについてみると、上→下→上に戻ったところで、また同じ軌道を繰り返す事になりますね。
あとがき
動きの内容（keyframes）を変えずに、再生にかける時間を変更するだけでも、動きにバリエーションが出てきますね^^
↑ちょっと古い記事ですが、この時も同じような事を行っています。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
