css text scroll loop code example

Example: css text scroll loop

<body>
    <style>
        .container {
            border: 1px solid black;
            width: 50vmin;
            height: 3vh;
            overflow: hidden;
            white-space: nowrap;
        }
        
        .text {
            position: relative;
        }
        
        .text :nth-child(1) {
            position: absolute;
            animation: scroll-left 5s linear infinite;
        }
        
        .text :nth-child(2) {
            position: absolute;
            animation: scroll-left-offset 5s linear infinite;
        }
        
        @keyframes scroll-left {
            0% {
                transform: translateX(0%);
            }
            100% {
                transform: translateX(-110%);
            }
        }
        
        @keyframes scroll-left-offset {
            0% {
                transform: translateX(110%);
            }
            100% {
                transform: translateX(0%);
            }
        }
    </style>
    <div class="container">
        <div class="text">
            <div>A very loooooooooooooooooong soooooooooooooooooong title</div>
            <div>A very loooooooooooooooooong soooooooooooooooooong title</div>
        </div>
    </div>
</body>

Tags:

Recent Posts