Web制作

CSSだけでできる！写真が画面の端から端へ流れる無限ループアニメーション

一列に並んだ要素が右から左あるいは上から下など、画面の端から端へ流れるように動く無限ループアニメーションをCSSのみで作成します。

1 CSS animationで作る無限ループアニメーション
- 1.1 サンプルコード
- 1.2 解説
  - 1.2.1 画像を2回読み込む理由

CSS animationで作る無限ループアニメーション

動かしたい要素（画像群）を一列に並べた横長（あるいは縦長）の複数枚の画像を作成します。用意した画像をhtmlで2回続けて読み込み、それらをひとつの div で囲みます。

サンプルコード

<div class="loop_wrap">
<ul>
<li><a href="#"><img src="img_01.jpg" alt="" /></a></li>
<li><a href="#"><img src="img_02.jpg" alt="" /></a></li>
<li><a href="#"><img src="img_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="img_04.jpg" alt="" /></a></li>
</ul>
<ul>
<li><a href="#"><img src="img_01.jpg" alt="" /></a></li>
<li><a href="#"><img src="img_02.jpg" alt="" /></a></li>
<li><a href="#"><img src="img_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="img_04.jpg" alt="" /></a></li>
</ul>
</div>

.loop_wrap {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
width: 100vw;
overflow: hidden;
box-sizing: border-box;
}

.loop_wrap ul {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
margin: 0;
padding: 0;
box-sizing: border-box;
}

.loop_wrap li {
display: inline-block;
min-width: 500px;
margin: 0 50px 0 0;
list-style: none;
text-align: center;
box-sizing: border-box;
}

.loop_wrap li a {
display: block;
}

.loop_wrap li img {
display: block;
width: 100%;
height: auto;
}

.loop_wrap li a:hover {
opacity: .7;
}

.loop_wrap ul:first-child {
-webkit-animation: loop 100s -50s linear infinite;
animation: loop 100s -50s linear infinite;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
}

.loop_wrap ul+ul {
-webkit-animation: loop 100s linear infinite;
animation: loop 100s linear infinite;
}

.loop_wrap:hover ul {
animation-play-state: paused;
}

@-webkit-keyframes loop {
0% {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}

to {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
}

@keyframes loop {
0% {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}

to {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
}

@-webkit-keyframes loop {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}

to {
-webkit-transform: translateX(-200%);
-ms-transform: translateX(-200%);
transform: translateX(-200%);
}
}

@keyframes loop {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}

to {
-webkit-transform: translateX(-200%);
-ms-transform: translateX(-200%);
transform: translateX(-200%);
}
}

解説

ウィンドウ幅いっぱいに画像を表示させたいので、全体を囲う div に width: 100vw; と overflow: hidden; を指定します。画像を横並びにしたいので display: flex; も指定します。高さは任意の高さを設定してください。

画面の端から端へと流れる動きは transform プロパティの translateX でX軸方向の移動距離を変えることで横にスライドして流れるような動きを実現します。開始と終了地点の異なるアニメーションを2つ用意します。

作成したアニメーションを動かしたい要素に指定します。作成した2種類のアニメーションをhtmlで2回読み込んだ画像それぞれに設定します。このとき animation-duration を同じ数値にして片方の画像にdurationの半分の時間の animation-delay を設定します。無限にループさせたいので animation プロパティに infiniteを指定します。　animation-timing-function は一定に変化する linear を指定します。

画像を2回読み込む理由

スタート地点の異なるアニメーションを2つ用意し、片方の画像にdelayを設定しましたが、2つの画像の動きを分けて図解してみます。画像1(緑)はX軸方向100%から-100%へ移動し100%に戻り再び-100%へ移動するという動きを繰り返し、画像2(黄)はX軸方向を0から-200%へ移動し、0に戻り再び-200%へ移動するという動きを繰り返します。これにより画像が途切れることなく横に流れているように見せています。

※ ウィンドウサイズを変更した際に画像がウィンドウ幅より小さくなると、ループの繰り返しのなかで余白が生じるため、ウィンドウ幅いっぱいに表示する可変レイアウトの場合は対処が必要です。