[CSS]背景画像をアニメーションすることで簡単に作れる無限ループスライドショー

<div class="bg-image-loop"></div>.bg-image-loop { width: 100%; height: 160px; /* 画像の高さを指定 */ position: relative; background: url("//onocom.net/code/wp-content/uploads/2018/01/loop_bg.png") repeat-x 0 0; background-size: auto 100%; animation: bg-slider 23s linear infinite; /* 23sの部分背景画像の約数だとスムーズ */ margin: 80px 0; padding: 0;}@keyframes bg-slider { from { background-position: 0 0; } to { background-position: -1518px 0; } /* 1518pxとは使用した背景画像の長さ */}