cssスプライトでパラパラマンガの様なアニメーションを作りたい

Question

cssスプライトでパラパラマンガの様なアニメーションを作りたい

cssスプライトで、左から右へスライドしながら進んでいく２コマのアニメーションを作りたい。
いも虫がくねくねしながら左から右へスライドしていくイメージです。

発生している問題・エラーメッセージ

下記の様な横に連続した画像を使用しています。
一コマ目で画像全体が表示されてしまい、二匹になったり一匹になったりしながら表示されてしまいます。
一匹だけをくねくねと動かしたいのです。

実際に使用している画像はsvgですが、上記pngと同じものです。

該当のソースコード

HTML

   <div class="slide">
     <div class="aruku"></div>
   </div>

CSS

.slide {
    animation-name: slide;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes slide {
    0% {transform: translateX(-55%);}
    100% {transform: translateX(55%);}
}
.aruku {
  margin: 100px auto 0;
  background: url(image/tekuteku.svg) 0 0 no-repeat;
  height: 0;
  overflow: hidden;
  padding-top: 70px;
  width: 200px;
  animation: sprite 1s steps(2) infinite;
  background-size: 200px;
}
@keyframes sprite {
  0%   {background-position: 0 0;}
  100% {background-position: -200px 0;}
}

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[mono81764049]

コードブロックで囲みました。ご指摘ありがとうございます。

[kei344]

CSSはブロックごとに別ファイルにしているのでしょうか？そうでなければまとめて一つのコードブロックでいいですよ。あと、最後に書いてある「HTML CSS」もCSSに書かれているのでしょうか。

[mono81764049]

内容を理解しておらずすみません。詳細にありがとうございます。修正しました。

[kei344]

https://jsfiddle.net/aoft89dL/ 提示のコードを再現してみたのですが、このサンプルでも問題は起こっていますか？

[mono81764049]

起こっています。同じ状態です。

[kei344]

background-position: -200px 0;しているからでは？
どのように動かしたいのか、tekuteku.svgはどのような画像なのかを質問文に追記されてはいかがでしょう。

[mono81764049]

ありがとうございます。質問を修正しました。
background-position: -200px 0;をなくすと、画像が動かなくなってしまうのです。
質問が分かりづらく、すみません。不備があればまた教えていただけると助かります。

Answer 1

これで。（2つの画像を並べた横幅が200pxなら、100pxあれば必要な画像が表示されることになる）

.aruku {
  width: 100px;
}

```**動くサンプル：**[https://jsfiddle.net/k6n7qr8s/](https://jsfiddle.net/k6n7qr8s/)

Comments

[mono81764049]

質問の仕方から大変丁寧にご指摘・ご回答いただきありがとうございます。
本当に助かりました。