今回はJSを使用せずにCSSのみで画像を永遠ループさせる方法をご紹介します。

私が今回永遠ループさせたかったのは前回のブログで紹介したグリッドデザインをJSで実装した画像です。
ソースは前回のブログを見てもらえるとわかると思います。

今回は下記ソースのul liの中にある画像をループさせたいのではなく
ulごとがっつりループさせたいというもの。

<div id="slide_wrap">
       <ul>
           <li class="element01">
               <a href="#">
                   <img src="images/index/01.jpg" alt="">
               </a>
           </li>
           <li class="element02">
               <a href="#">
                   <img src="images/index/02.jpg" alt="">
               </a>
           </li>
           <li class="element03">
               <a href="#">
                   <img src="images/index/03.jpg" alt="">
               </a>
           </li>
        </ul>
</div>

え？それだったら次にくる画像なくない？っていうことなので
空白の間を空けないためにulのブロックももう1回分ソースに記述しておきます。

<div id="slide_wrap">
       <ul>
           <li class="element01">
               <a href="#">
                   <img src="images/index/01.jpg" alt="">
               </a>
           </li>
           <li class="element02">
               <a href="#">
                   <img src="images/index/02.jpg" alt="">
               </a>
           </li>
           <li class="element03">
               <a href="#">
                   <img src="images/index/03.jpg" alt="">
               </a>
           </li>
        </ul>
//ここまで1つめのul
        <ul>
           <li class="element01">
               <a href="#">
                   <img src="images/index/01.jpg" alt="">
               </a>
           </li>
           <li class="element02">
               <a href="#">
                   <img src="images/index/02.jpg" alt="">
               </a>
           </li>
           <li class="element03">
               <a href="#">
                   <img src="images/index/03.jpg" alt="">
               </a>
           </li>
        </ul>
//ここまで2つめ
     </div>

ulの中身は1つめも2つめもまったく同じです。
ちなみに変えても問題なく動きます。
CSSなので。

肝心のアニメーションですが、以下になります。

#slide_wrap {
	ul {
            display: flex;
		&:first-child {
			animation: loop 50s linear infinite;
			flex: 1;
		}
		&:last-child {
  			animation: loop2 50s linear infinite;
			flex: 1;
		}
	}
}


@keyframes loop {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(-200%);
  }
}

@keyframes loop2 {
  from  {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

これでばっちり！
グリッドデザインで組んだブロックが永遠ループで横に動きます。
みなさんもぜひ試してみてくださいね～！

• blog,
• code,
• css3