どうも！LSSです！！
梅雨ネタのCSSアニメをひとつ、考えてみました。
水面の波紋アニメーション
コード
<style>
@keyframes suimena{
0%{background-size:0% 0%,20% 20%,50% 50%,100% 100%;}
100%{background-size:20% 20%,50% 50%,100% 100%,200% 200%;}
}
.suimen{
height:100px;
background-color:#8888aa;
background-image:
radial-gradient(farthest-side,#aaaaff00 91.9%,#aaaaff 95.9%,#aaaaff00 100%),
radial-gradient(farthest-side,#aaaaff00 91.9%,#aaaaff 95.9%,#aaaaff00 100%),
radial-gradient(farthest-side,#aaaaff00 91.9%,#aaaaff 95.9%,#aaaaff00 100%),
radial-gradient(farthest-side,#aaaaff00 91.9%,#aaaaff 95.9%,#aaaaff00 100%);
background-position:50% 50%;
background-repeat:no-repeat;
animation:suimena 3s linear infinite;
}
</style>
<div class="suimen"> </div>
radial-gradientが４つ並んでいますが
４つとも、
radial-gradient(farthest-side,#aaaaff00 91.9%,#aaaaff 95.9%,#aaaaff00 100%)
で内容は同じものをコピペしています。
これが１行＝１つの輪となりますが、サイズ違いで表示されているのは、
@keyframes suimena{
0%{background-size:0% 0%,20% 20%,50% 50%,100% 100%;}
100%{background-size:20% 20%,50% 50%,100% 100%,200% 200%;}
}
keyframesの定義で経過時間0%の時に、
「１つめは縦横0%、２つめは縦横20%…」
とそれぞれサイズを変えて定義しているから、なんですね。
ちなみに、「0%」「20%」「50%」「100%」となるようにしています。
そして経過時間100%になると、「20%」「50%」「100%」「200%」となります。
0%だったものが20%に、20%だったものが50%に、と大きくなりますが、経過時間100%の時点での最終サイズがちょうど、経過時間0%だった時の「ひとつ外側の輪」と同じサイズを指定しているところがミソ。
このアニメーションを、
animation:suimena 3s linear infinite;
と、無限繰り返し指定しているので、次回のアニメーション開始時には１つづつ周のずれた輪が続けて大きくなっていくため、シームレスに大きくなっていくように見えています^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
