dorapon2000 https://blog.hatena.ne.jp/dorapon2000/ dorapon2000’s diary https://dorapon2000.hatenablog.com/ フロントエンド スプライト画像をアニメーションさせながら、座標移動も適応する方法に単純ながら四苦八苦したので記録に残します。 前準備 <div class='img-container'> </div> .img-container { width: 700px; height: 100px; margin: 100px auto 0; border: 1px solid #000000; font-size: 0; } 上のボーダーで囲まれた領域を横断するように歩くスプライドアニメーションを配置したいです。png画像は実際は透過処理しています。 実現方法 多段のdivにして、親に座標移動のanimation… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdorapon2000.hatenablog.com%2Fentry%2F2021%2F04%2F03%2F121240" title="スプライトアニメーションをしながら座標移動をする - dorapon2000’s diary" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/d/dorapon2000/20210403/20210403114847.gif Hatena Blog https://hatena.blog 2021-04-03 12:12:40 rich https://dorapon2000.hatenablog.com/entry/2021/04/03/121240 1.0 100%