同内容は、すでにあちらこちらにあふれているところ、お目汚し失礼します。
できあがったもの
こちら https://codepen.io/sengokyu/pen/poRWzOr に置いています。
仕組み
3枚の画像でやる場合です。
画像①、画像②、画像③、画像①を横に並べる。
画像1枚分だけ見えるように、画像全体をoverflow: hidden;なコンテナで包む。
左端の画像のmargin-leftを負の値にするアニメーションを設定する。
画像を横に並べる
まず、画像を隙間なく並べます。
右端の画像は、左端と同じものにします。
<div class="center slide"
><img src="https://i.imgur.com/Y8WHhk2.jpg"
><img src="https://i.imgur.com/r0o8RoH.png"
><img src="https://i.imgur.com/ioUKL1K.jpg"
><img src="https://i.imgur.com/Y8WHhk2.jpg"
></div>
改行せず横並びになるようにします。
.slide {
white-space: nowrap;
}
画像全体をoverflow: hidden;なコンテナで包む
画像1枚だけ見えるように、overflow: hiddenなコンテナで包みます。サイズも指定します。
.slide {
white-space: nowrap;
width: 300px;
height: 300px;
overflow: hidden;
}
画像のサイズもコンテナにあわせます。
.slide img {
width: inherit;
height: inherit;
margin: 0;
padding: 0;
border: none;
}
左端の画像のmargin-leftを負の値にするアニメーションを設定する
まずキーフレームを作成します。
画像が3つ(重複分で+1)あるので、キーフレーム4つです。
キーの進行に応じて、100%ずつ左へずらします。
@keyframes slide-4 {
0% { margin-left: 0; }
33% { margin-left: -100%; }
66% { margin-left: -200%; }
100% { margin-left: -300%; }
}
左端の画像（先頭子要素）にアニメーションを設定します。
.slide > :first-child {
animation-name: slide-4; /* 作成したキーフレームを使う */
animation-duration: 5s; /* アニメーション全体を5秒にする */
animation-delay: 0s; /* 直ちにアニメーション開始する */
animation-iteration-count: infinite; /* 永遠にアニメーションする */
}
画像の枚数を増減させるときは……
キーフレームの数を調整してください。
例えば、画像4つ(重複分で+1)のときはこうなります。
@keyframes slide-4 {
0% { margin-left: 0; }
25% { margin-left: -100%; }
50% { margin-left: -200%; }
75% { margin-left: -300%; }
100% { margin-left: -400%; }
}
参考リンク
【CSS3】@keyframes と animation 関連のまとめ
↧