CSS（スタイルシート）の@keyframesを使うと画像をスライドさせるようなアニメーションを実装することができます。
今回はフィギュアスケートをする男性の画像を氷の上を滑っているような感じでスライドさせてます。
CSSの@keyframesを使って画像を横にスライドさせる方法
CSSでアニメーションを表現するには「animation」プロパティと「@keyframes」プロパティを使います。
animationプロパティと@keyframes
animationプロパティはアニメーションに設定する値を一度に設定できるプロパティです。
animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-derection
- animation-name
- 利用するキーフレームの名前。
- animation-duration
- 実行する時間。
秒(s)またはミリ秒(ms)で指定する - animation-timing-function
- 実行する速度のパターン。
ease：ゆっくり変化を始め、途中で加速し、減速して終わる。
liner：一定の速度で変化する。
ease-in：ゆっくり変化を始め、途中で加速する。
ease-out ：高速で変化を始め減速しながら終わる。
ease-in-out：ゆっくり変化を始め、徐々に途中で加速し、減速しながら終わる。 - animation-delay
- アニメーションが開始されるまでの待機時間。
秒(s)またはミリ秒(ms)で指定する。 - animation-iteration-count
- 実行する回数｡
数値：アニメーションを実行する回数。
infinite：アニメーションを無限に繰り返す。 - animation-derection
- アニメーションを繰り返す時に逆再生するかを指定。
normal：通常の方法でアニメーションを繰り返す。
alternate：奇数回は通常通り、偶数回は逆向きにアニメーションを繰り返す。
@keyframesはアニメーションで変化させる内容を指定します。
@keyframes animation-name { キーフレーム{ 変化させるプロパティ: 値; } }
- キーフレーム
- %値：%値を指定します。
10秒のアニメーションの場合は、30%が3秒時点、80%が8秒時点を示します。
from：開始点を指定します。0%と同値です。
to：終了点を指定します。100%と同値です。
画像を左右にスライドさせるCSSアニメーション
実際に画像を左右にスライドさせるには@keyframesの値を「0%（左端）->50%（右端）->100%（左端）」のように画像のX軸の位置をずらします。
.slider {
animation: slider-animation 1.5s linear infinite;
}
@keyframes slider-animation {
0%, 100% { transform:translateX(0); }
50% { transform:translateX(360px); }
}
HTMLには画像のクラスに作成した「.slider」クラスを指定します。
<img class="slider" src="画像のURL" />
実際にコーディングすると以下のようにスケーターが左右にスライドして見えます。
まとめ
CSSの@keyframesを使うと簡単に画像をアニメーションのようにあつかえるようになります。
以上、「CSSの@keyframesを使って画像を横にスライドさせる方法」でした。
