CSS实现文本和图片无限滚动动画

Demo图如下：

<div class="scroll" style="--time: 20s">
        <div>
            <span>HTMLspan>
            <span>CSSspan>
            <span>JavaScriptspan>
            <span>Vuespan>
            <span>Reactspan>
            <span>Figmaspan>
            <span>Photoshopspan>
        div>

        <div>
            <span>HTMLspan>
            <span>CSSspan>
            <span>JavaScriptspan>
            <span>Vuespan>
            <span>Reactspan>
            <span>Figmaspan>
            <span>Photoshopspan>
        div>
    div>

    <div class="scroll" style="--time: 30s">
        <div>
            <span>HTMLspan>
            <span>CSSspan>
            <span>JavaScriptspan>
            <span>Vuespan>
            <span>Reactspan>
            <span>Figmaspan>
            <span>Photoshopspan>
        div>

        <div>
            <span>HTMLspan>
            <span>CSSspan>
            <span>JavaScriptspan>
            <span>Vuespan>
            <span>Reactspan>
            <span>Figmaspan>
            <span>Photoshopspan>
        div>
    div>

    <div class="scroll" style="--time: 10s">
        <div>
            <span>HTMLspan>
            <span>CSSspan>
            <span>JavaScriptspan>
            <span>Vuespan>
            <span>Reactspan>
            <span>Figmaspan>
            <span>Photoshopspan>
        div>

        <div>
            <span>HTMLspan>
            <span>CSSspan>
            <span>JavaScriptspan>
            <span>Vuespan>
            <span>Reactspan>
            <span>Figmaspan>
            <span>Photoshopspan>
        div>
    div>

    <div class="scroll" style="--time: 35s">
        <div>
            <span>HTMLspan>
            <span>CSSspan>
            <span>JavaScriptspan>
            <span>Vuespan>
            <span>Reactspan>
            <span>Figmaspan>
            <span>Photoshopspan>
        div>

        <div>
            <span>HTMLspan>
            <span>CSSspan>
            <span>JavaScriptspan>
            <span>Vuespan>
            <span>Reactspan>
            <span>Figmaspan>
            <span>Photoshopspan>
        div>
    div>
    <div class="scroll img-box" style="--time:25s">
        <div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
        div>
        <div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
            <div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;">div>
        div>
    div>
    div>