<section>
    <div class="div1">Привет! Я бегущая строка </div>
    <div class="div2">Привет! Я бегущая строка </div>
</section>

<style>
    section {
       display: flex;
       overflow-x: hidden;
    }

    div {
      font-size: 70px;
      font-size: sans-serif;
      line-height: 1.3;
      padding: 24px 0;
      white-space: nowrap;
      display: inline-block;
    }

    .div1 {
        animation: marquee1 20s infinite linear;
        animation-delay: -20s;
    }

    .div2 {
        animation: marquee2 20s infinite linear;
        animation-delay: -10s;
    }


    div:after {
        content: 'Привет! Я бегущая строка ';
    }

@keyframes marquee1 {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }

    @keyframes marquee2 {
        0% {
            transform: translateX(0%);
        }
        100% {
            transform: translateX(-200%);
        }
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.