jQueryを使わずにCSSのみで背景画像をX軸にスライドさせる方法WEBサイトでよく見かけるコンテンツのひとつ、スライドショー。 今回は、複数の画像をスライドさせる方法ではなく、背景画像をX軸内で無限ループさせるスライドショーをCSSのみで実装する方法です。 jQueryを使わずCSSアニメーションを使っているので、 CSS animationsをサポートしているブラウザでないと動作しませんのでご注意ください。 最終的な結果は下のようになります。 See the Pen CSS Sliding Background by chiharu shoji (@kenyo_c) on CodePen. HTMLの設定 HTMLの設定をしていきます。構造としてはこんな感じ。 <div class="wrap"> <div class="sliding"></div> </div> ビューポートの幅にフィットする外枠のdiv.wrapを一つ作成します。 そして、背景
