どうも！LSSです！！
の派生で、いくつか考えてみました。
ブログでの使い勝手…にとらわれず、CSSアニメーションの動きを見て楽しむ感じ？
跳ねる画像
から、枠をとっぱらい、ボールの代わりに画像ファイルを跳ねさせるサンプルです。
コード
<style>
@keyframes boundimga1{
0%{width:100px;}
100%{width:100%;}
}
@keyframes boundimga2{
0%{background-position:0% 0%;}
100%{background-position:100% 0%;}
}
.boundimg{
height:50px;
animation:boundimga1 16.5s linear infinite alternate,boundimga2 1.5s ease infinite alternate;
background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20210429/20210429222542.png);
background-size:50px 50px;
background-repeat:no-repeat;
}
</style>
<div class="boundimg"> </div>
コード中、青文字部分が画像ファイルのURLです。
表示させたい画像ファイルのURLに置き換えてください^^
赤文字部分が画像を表示させたいサイズで、横幅、高さ、の順に設定します。
その上のオレンジ文字部分は画像の高さにあわせて設定してください。
跳ねるボール二次元版
枠の中で、ボールが跳ね返りながらバウンドするサンプルです。
横位置変更アニメと縦位置変更アニメを組み合わせる事で、跳ね返る位置が常に変化します。
コード
<style>
@keyframes boundx{
0%{background-position-x:0%;}
100%{background-position-x:100%;}
}
@keyframes boundy{
0%{background-position-y:100%;}
33%{background-position-y:45%;}
66%{background-position-y:15%;}
100%{background-position-y:0%;}
}
.boundball{
width:300px;
height:300px;
border-radius:15px;
padding:15px;
animation:boundx 1.73s linear infinite alternate,boundy 1s linear infinite alternate;
background-color:#ddffdd;
background-image:radial-gradient(15px,#aaeeaaff 80%,#aaeeaa00 100%);
background-size:30px 30px;
background-repeat:no-repeat;
}
</style>
<div class="boundball">跳ねるボール</div>
width:300px;
height:300px;
で枠のサイズを指定していますが、ここを書き換えても問題なく跳ね返ります。
1.73sと1sの部分で、横移動にかかる時間、縦移動にかかる時間をそれぞれ設定しています。（s＝秒で、1.73秒と1秒という事になります）
この秒数を変えて指定する事で、跳ね返り位置が毎回異なる、という動きになっています。
ブロック崩し風（ブロックはないけどｗ）
上記の「跳ねるボール二次元版」を作っているうちに思いついたネタです。
下のバー（ブロック崩しでいうところのパドル）は常にボールと連動して動くので、決してボールを落とす事なく跳ね返します。
コード
<style>
@keyframes blkax{
0%{background-position-x:0%;}
100%{background-position-x:100%;}
}
@keyframes blkay{
0%{background-position-y:98%,100%;}
100%{background-position-y:0%,100%;}
}
.blkkzs{
width:300px;
height:300px;
border-radius:5px;
padding:15px;
animation:blkax 1.54s linear infinite alternate,blkay 2s linear infinite alternate;
background-color:#dddddd;
background-image:radial-gradient(10px,#999999ff 30%,#444444ff 80%,#44444400 100%),linear-gradient(#444444,#cccccc,#444444);
background-size:20px 20px,60px 15px;
background-repeat:no-repeat;
}
</style>
<div class="blkkzs">ブロック崩し風</div>
あとがき
後者２種の「横位置の変化と縦位置の変化をそれぞれ時間をずらしてアニメーションする事で、複雑な動きに見える」のは、だいぶ前に
で既にやってましたｗ
「background-position」プロパティがさらに「background-position-x」「background-position-y」に分けて、それぞれ指定できるんですね。
そしてその前には、
JavaScriptでもやっていて、この時に縦と横の動きの組み合わせで跳ね返りもうまく表現できる事に気づいた感じです。
さらに元ネタをたどると、
さじさんの記事で、ポーロ君デビュー回の動きに影響を受けたんでしたｗ
もう約２年前になるんですねぇ。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
