【つまづき】CSS、animationとradial-gradientの組み合わせ【実験段階】

　どうも！LSSです！！

CSSをいじっているうちに、「なんだかよく分からないもの」ができてしまいました。

…なんだか、やろうと思っていた事が期待通りの動きにならず、「なんだこりゃ？？」となっていたところで方向性を変えて、「なにか」らしいものに仕上げた…けれどやはり「なんだかよく分からないもの」になっておりますｗ

なんだかよく分からないもの

なんだかよく分からないものができました^^;

コード

<style>
@keyframes cbig{
0%{background-size:0% 0%;background-position:50% 50%;}
50%{background-size:100% 100%;background-position:0% 0%;}
100%{background-size:200% 200%;background-position:-100% -100%;}
}
.cbox{
width:300px;height:300px;
background-color:#000000;
background-image:
radial-gradient(farthest-side,#00ff0000 90%,#00ff00ff 99%,#00ff0000 100%);
animation:cbig 5s linear infinite;
background-repeat:no-repeat;
padding:10px;
color:#ffffff;
}
</style>
<div class="cbox">なんだかよく分からないものができました^^;</div>

当初やろうとしていた事

当初、やろうとしていた事は↓こんな感じ。

 

keyframesの内容を、

0%{background-size:0% 0%;background-position:50% 50%;}
100%{background-size:100% 100%;background-position:0% 0%;}

とする事で、「円が枠の中心を円の中心としたまま、大きくなっていく」という事をしたかったのですが…これが何故か、最初左上に寄った形で大きくなり、最終的には枠いっぱいサイズで期待通りに収まるんですね。

あっ！

今、文章を書きながら、原因というか要因が分かりました！

またあれです。

「background-positionを%で指定した時の特殊なクセ（？）」ですね^^;

じゃあ、どうしたらいいのかは…そうか、background-positionは「50% 50%」のままでいいんでした。

 

<style>
@keyframes cbig3{
0%{background-size:0% 0%;}
100%{background-size:100% 100%;}
}
.cbox3{
width:300px;height:300px;
background-color:#000000;
background-image:
radial-gradient(farthest-side,#00ff0000 90%,#00ff00ff 99%,#00ff0000 100%);
animation:cbig3 5s linear infinite;
background-repeat:no-repeat;
background-position:50% 50%;}
</style>
<div class="cbox3"> </div>

これ、つい忘れちゃいますね^^;;;

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

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