どうも！LSSです！！
「CSSのkeyframesでリズミカルなアニメーションを作ろう」という試み、なんだかこんなのが出来ました。
謎リズムアニメーション
コード
<style>
@keyframes nazorzma{
0%,87.6%,100%{background-position:0 0;}
12.5%,25%,37.5%{background-position:0 100%;}
37.6%,50%{background-position:100% 100%;}
62.5%,75%,87.5%{background-position:100% 0;}
0%,25%,50%,75%,100%{background-size:50% 50%;}
37.5%,87.5%{background-size:100% 50%;}
}
.nazorzm{
width:280px;
height:280px;
background-image:radial-gradient(farthest-side,#ccccff 99%,#ccccff00 100%);
background-repeat:no-repeat;
animation:nazorzma 1.6s linear infinite;
}
</style>
<div class="nazorzm"> </div>
なんなんでしょうね？これ
スライム、というとしっくりくるでしょうか？ｗ
コード中で、
width:280px;
height:280px;
の部分で横幅、高さが変更できます。
また、
background-image:radial-gradient(farthest-side,#ccccff 99%,#ccccff00 100%);
を
background-image:url('画像ファイルのURL');
に変える事で、この移動しながら伸び縮みする画像を変更でき、
animation:nazorzma 1.6s linear infinite;
の「1.6s」の数値を変える事でスピードを変更できます^^
変更例
コード（部分抜粋）赤太字が変更箇所です。
.nazorzm{
width:180px;
height:180px;
background-image:url('画像ファイルのURL');
background-repeat:no-repeat;
animation:nazorzma 2s linear infinite;
}
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
