Pure CSS provides easy, seamless scrolling

This paper will introduce how to achieve seamless scrolling animation through ANIMATION in CSS. The idea comes from the animation way of JS. 1. Add the animation property to the element to be animated and set the parameters and the animation scheme @keyframes. 2. Duplicate two copies of the same element. 3. The animation logic is: 2 identical elements, the width of the parent container is 1680px, when the first element is shifted 840px to the left, the position is immediately restored, using visual difference to achieve a seamless scrolling effect.

Figure 1:

Figure 2:

html:

<div class="box1-wrapper">
    <div class="box1">
        <ul class="img-list">
            <li class="img-item">1</li>
            <li class="img-item">2</li>
            <li class="img-item">3</li>
            <li class="img-item">4</li>
        </ul>
        <ul class="img-list">
            <li class="img-item">1</li>
            <li class="img-item">2</li>
            <li class="img-item">3</li>
            <li class="img-item">4</li>
        </ul>
    </div>
</div>
Copy the code

css:

.box1-wrapper {
    width: 840px;
    height: 200px;
    margin: 50px auto 0;
    overflow: hidden;
    background-color: darkgray;
}
.box1 {
    width: 1680px;
    height: 200px;
    overflow: hidden;
    background-color: darkgoldenrod;
    font-size: 0;
}
.box1:hover .img-list{
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}
.img-list {
    display: inline-block;
    width: 840px;
    height: 200px;
    overflow: hidden;
    font-size: 0;
    background-color: coral;
    animation: imagesLoop 10s linear 1s infinite normal;
}
.img-item {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-right: 10px;
    /* background-image: url('qcx.png'); * /
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: darkcyan;
    font-size: 20px;
    text-align: center;
    line-height: 200px;
    cursor: pointer;
    color: red;
}
@keyframes imagesLoop {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-840px); }}Copy the code