画像のアニメーションについて

Question

画像のアニメーションについての質問です。
画像が見えている部分を左から右（または右から左）に動かしたいのです。
・画像サイズと位置は変わらずに中身の見えている部分が移動
・例：何秒かかけて①➡️②へ移動
よく使われる手法やいいアイデアなどありましあたらご教示お願いいたします。

①

②

Answer 1

CSS アニメーションのサンプルを簡単に作ってみました。

<div class="cssAni">
</div>

.cssAni {
  width:400px;
  height:300px;
  background:url(http://placehold.jp/80/cccccc/ffffff/800x300.png?text=ABCDEFGHIJKLMNO) no-repeat;
  overflow:hidden;
  animation-name: SlideLeft;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes SlideLeft {
  0% {background-position: 0 0;}
  100% {background-position: -400px 0;}
}

動くサンプル

Answer 2

特別な理由がなければ CSS。
jQuery等のライブラリやフレームワークを使い慣れているか、プロジェクト内で利用しているのであれば、ライブラリやフレームワークのアニメーション機能を使うのもあり。

といったところでしょうか。
詳しいやり方は、「CSS アニメーション」等で検索して調べてください。