どうも！LSSです！！
なんとなく「２つのkeyframesアニメーションで、２つめの動きが１つめの動きの状態に影響されて変化するようなもの」を試してみたい と思いたち、作ってみると こういうものができました。
跳ねるボール
コード
<style>
@keyframes dblanm1{
0%{width:135px;}
100%{width:100%;}
}
@keyframes dblanm2{
0%{background-position:0% 0%;}
100%{background-position:100% 0%;}
}
.dblanm{
height:30px;
border-radius:15px;
padding-left:15px;
animation:dblanm1 15s linear infinite alternate,dblanm2 1s ease infinite alternate;
background-color:#ddffdd;
background-image:radial-gradient(15px,#88cc88ff 80%,#88cc8800 100%);
background-size:30px 30px;
background-repeat:no-repeat;
}
</style>
<div class="dblanm">跳ねるボール</div>
２つのアニメーション
まず１つめは、
@keyframes dblanm1{
0%{width:135px;}
100%{width:100%;}
}
divタグの枠の「幅（width）」を、135pxから100%まで変化させるキーフレームを定義しています。
呼び出し時に、
animation:dblanm1 15s linear infinite alternate,dblanm2 1s ease infinite alternate;
infinite（無限繰り返し）とalternate（終了後に逆再生）を指定しているので、伸びて縮んで…を繰り返す事になります。
２つめは、
@keyframes dblanm2{
0%{background-position:0% 0%;}
100%{background-position:100% 0%;}
}
その枠にの背景画像の描画開始位置（background-position）の横位置を0%から100%に変化させるキーフレームを定義しています。
背景画像として、
background-image:radial-gradient(15px,#88cc88ff 80%,#88cc8800 100%);
background-size:30px 30px;
background-repeat:no-repeat;
「半径15pxの円をradial-gradientで描き、そのサイズは縦横30px、繰り返し描画しない」という指定にしているので、ポツンと小さい円がひとつあるだけのものを指定しています。
これで横位置を0%から100%に変化させているので、「枠の中で左端から右端に移動する」というアニメーション、という事になります。
こちらも、呼び出し時に
animation:dblanm1 15s linear infinite alternate,dblanm2 1s ease infinite alternate;
無限繰り返し、終了時に逆再生、という指定をしているため、延々と往復運動を繰り返す事になります。
この２つのアニメ―ションを、同時に指定している事で、
「伸び縮みする枠の中で、ボールが左右に往復運動し続ける」
というものになるんですね。
あとがき
複数の動き、その一方がもう一方に干渉を受ける、という組み合わせは他にもありそうですが、とりあえず思いついたのがこの「幅」と「描画位置」の関係でした。
これもまた、ここから「ブログ等で使い甲斐のあるもの」になるかどうかは…謎ですｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
