どうも！LSSです！！
は、「１枚の画像を別々に扱う」という試みでした。
元の発想は、「人物の画像の、下半分だけが縦に伸び縮みするアニメーションだったら、スクワット（または高位の女性のお辞儀）みたいになるかな？」というところでした。
今回は「下半分だけ伸び縮み」を、画像を伴わずにkeyframesで再現する事を試みてみました。
スクワットの動きを表現できるか試してみた、だけ
コード
<style>
@keyframes testa{
0%{height:200px;}
100%{height:100px;}
}
@keyframes testb{
0%{top:0px;}
100%{top:100px;}
}
.test{
position:relative;
width:280px;
height:400px;
}
.test div{
position:relative;
width:100%;
left:0;
}
.test div:nth-child(1){
height:200px;
border:1px solid red;
animation:testb 1s infinite alternate;
}
.test div:nth-child(2){
border:1px solid blue;
animation:testa 1s infinite alternate,testb 1s infinite alternate;
}
</style>
<div class="test">
<div> </div>
<div> </div>
</div>
結局のところ、高さも縦位置も動作指定が必要？
縦に２つ入ったdivタグ（赤枠と青枠）、position:relative;を指定して、bottom:0;を指定しておけば、下の方の高さ変化だけでいけるかな？と最初試みてみましたが、できませんでした^^;
ので、結局「２つのdivの縦位置を変化」させる指定と「下のdivだけ、高さを変化」させる指定を書いてようやく期待通りの動きに^^
あとは画像を当てれば、予定通りのアニメーションになりそうです。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
