流れるテキスト・流れる画像

<div class='loop-container'>
    <ul>
        <li>流れるテキスト</li>
        <li>流れるテキスト</li>
        <li>流れるテキスト</li>
    </ul>
</div>

.loop-container {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 30px;
    background: #fff000;
}
.loop-container ul {
    display: flex;
    animation: loop-slide 20s infinite linear 1s both;
    // margin:0; padding:0; list-style:0;
}
.loop-container li {
    width: 240px;
}
@keyframes loop-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

<div class='loop-wrap'>
    <ul>
        <li><img src=''></li>
        <li><img src=''></li>
        <li><img src=''></li>
        <li><img src=''></li>
        <li><img src=''></li>
    </ul>
    <ul>
        <li><img src=''></li>
        <li><img src=''></li>
        <li><img src=''></li>
        <li><img src=''></li>
        <li><img src=''></li>
    </ul>
</div>

.loop-wrap {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 30px;
}
.loop-wrap ul {
    display: flex;
    animation: loop-slide 30s infinite linear 1s both;
}
.loop-container li {
    width: calc( 100vw / 5 );
}
.loop-container li img {
    padding: 3px;
    width: 100%:
}
@keyframes loop-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

<div class='loop-wrap'>
    <div></div>
</div>

.loop-wrap {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 100px;
}
.loop-wrap div {
    background-image: url(xxx);
    width: 100%;
    height: 100px;
    animation: loop-slide 1.5s infinite linear;
}
@keyframes loop-slide {
    from { background-position: 0 0; }
    to { background-position: -100px 0;}
}