左へ無限に流れる画像CSS

<div class="itemLoopBox">
<div class="itemLoopBox__inner">
<ul class="--typeLeft">
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
</ul>
<ul class="--typeLeft">
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
</ul>
<!-- /.itemLoopBox__inner --></div>
<!-- /.itemLoopBox --></div>

.itemLoopBox__inner {
display: flex;
overflow: hidden;
}
.itemLoopBox__inner>ul {
display: flex;
list-style: none;
padding: 0;
}
.itemLoopBox__inner>ul.--typeLeft {
animation: animeItemLoopLeft 80s infinite linear 0.5s both;
}
.itemLoopBox__inner>ul>li {
width: calc(100vw / 6);
}
.itemLoopBox__inner>ul>li img {
width: 100%;
}
.itemLoopBox:hover .itemLoopBox__inner>ul.--typeLeft{
animation-play-state: paused;//ホバーで一時停止
}

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

.itemLoopBox__inner {
 display: flex;
 overflow: hidden;
 &>ul {
  display: flex;
  list-style: none;
  padding: 0;
  &.--typeLeft {
   animation: animeItemLoopLeft 80s infinite linear 0.5s both;
  }
  &>li{
   width: calc(100vw / 6);
   img {
    width: 100%;
   }
  }
 }
}
.itemLoopBox:hover .itemLoopBox__inner>ul.--typeLeft{
animation-play-state: paused;
}
@keyframes animeItemLoopLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}

右へ無限に流れる画像CSS

<div class="itemLoopBox">
<div class="itemLoopBox__inner">
<ul class="--typeRight">
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
</ul>
<ul class="--typeRight">
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
<li><img src="img/hogehoge.jpg" /></li>
</ul>
<!-- /.itemLoopBox__inner --></div>
<!-- /.itemLoopBox --></div>

.itemLoopBox__inner {
display: flex;
overflow: hidden;
}
.itemLoopBox__inner>ul {
display: flex;
list-style: none;
padding: 0;
}
.itemLoopBox__inner>ul.--typeRight{
animation: animeItemLoopRight 80s infinite linear 0.5s both;
}
.itemLoopBox__inner>ul>li {
width: calc(100vw / 6);
}
.itemLoopBox__inner>ul>li img {
width: 100%;
}
.itemLoopBox:hover .itemLoopBox__inner>ul.--typeRight{
animation-play-state: paused;//ホバーで一時停止
}

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

.itemLoopBox__inner {
 display: flex;
 overflow: hidden;
 &>ul {
  display: flex;
  list-style: none;
  padding: 0;
  &.--typeRight{
   animation: animeItemLoopRight 80s infinite linear 0.5s both;
  }
  &>li{
   width: calc(100vw / 6);
   img {
    width: 100%;
   }
  }
 }
}
.itemLoopBox:hover .itemLoopBox__inner>ul.--typeRight{
animation-play-state: paused;
}
@keyframes animeItemLoopRight {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}

無限に流れるテキストCSS (左流れ)

流れるテキストを囲うliを文字数にあった幅に指定する。
画面の幅よりitemLoopBoxの幅は狭い場合は間が空いてしまうので、
想定する画面幅より長くなるように調整をする。

<div class="itemLoopBox">
<div class="itemLoopBox__inner">
<ul class="--typeLeft --typeText">
<li>無限に流れるテキスト</li>
<li>無限に流れるテキスト</li>
<li>無限に流れるテキスト</li>
<li>無限に流れるテキスト</li>
<li>無限に流れるテキスト</li>
<li>無限に流れるテキスト</li>
</ul>
<ul class="--typeLeft --typeText">
<li>無限に流れるテキスト</li>
<li>無限に流れるテキスト</li>
<li>無限に流れるテキスト</li>
<li>無限に流れるテキスト</li>
<li>無限に流れるテキスト</li>
<li>無限に流れるテキスト</li>
</ul>
<!-- /.itemLoopBox__inner --></div>
<!-- /.itemLoopBox --></div>

.itemLoopBox__inner {
display: flex;
overflow: hidden;
}
.itemLoopBox__inner>ul {
display: flex;
list-style: none;
padding: 0;
}
.itemLoopBox__inner>ul.--typeText {
width:60em;//10文字が6個の幅
}
.itemLoopBox__inner>ul.--typeLeft.--typeText {
animation: animeItemLoopLeftText 80s infinite linear 0.5s both;
}
.itemLoopBox__inner>ul.--typeText>li {
width:10em;//10文字
}
.itemLoopBox:hover .itemLoopBox__inner>ul.--typeLeft.--typeText{
animation-play-state: paused;//ホバーで一時停止
}

@keyframes animeItemLoopLeftText {
from {
transform: translateX(0);
}
to {
transform: translateX(-60em); //10文字が6個の幅
}
}

.itemLoopBox__inner {
 display: flex;
 overflow: hidden;
 &>ul {
  display: flex;
  list-style: none;
  padding:0;
  &.--typeLeft.--typeText {
   animation: animeItemLoopLeftText 80s infinite linear 0.5s both;
  }
  &.--typeText {
   width:60em;//10文字が6個の幅
   &>li{
    width:10em;//10文字
   }
  }
 }
}
.itemLoopBox:hover .itemLoopBox__inner>ul.--typeLeft.--typeText{
animation-play-state: paused;
}
@keyframes animeItemLoopLeftText {
from {
transform: translateX(0);
}
to {
transform: translateX(-60em); //10文字が6個の幅
}
}

デモページはこちら

デザインの一覧