CSS smooth text animation

Question

I am new in CSS animation and I have three different words and want change them every 3 seconds. That's ok, but I also want change it "smoothly" from left to right. If exists only pure CSS solution, its plus.

Here is my basic html (block is diplay: block)

<div class="rotating-text-first block">
 <span id="rotating-text" class="block">
 </span>
</div>

and css - its not working properly

.rotating-text-first {
    overflow: hidden;
    animation: floatText 5s linear infinite;
}

#rotating-text::before {
    content: '';
    animation: spin 5s linear infinite;
}

@keyframes spin {
    0% {
        content: 'WEB';
    }

    33% {
        content: 'E-SHOP';
    }

    66% {
        content: 'APLIKACE';
    }
}

@keyframes floatText {
    0% {
        max-width: 0%;
    }
    32.9% {
        max-width: 50%;
    }
    33% {
        max-width: 0%;
    }
    65.9% {
        max-width: 50%;
    }
    66% {
        max-width: 0%;
    }
    99.9% {
        max-width: 50%;
    }
}

Answer 1

I hope this snippet solves your problem or set an example for you.

• Only CSS and dummy text are used.
• You can play with time intervals as you wish.

.rotating-text-first {
    overflow: hidden;
    position:relative;
    min-width: 100%;
    height: 24px;
}

#rotating-text::before {
    content: '';
    position: absolute;
    animation: spin 5s linear infinite;
        transform: translateX(-102%);
}

@keyframes spin {
    0% {
        content: 'WEB';
        transform: translateX(-102%);
    }
    
    8.333% {
        transform: translateX(0);
    }
    
    16.666% {
        transform: translateX(0);
    }

    24.999% {
        content: 'WEB';
        transform: translateX(-102%);
    }

    33.333% {
        content: 'E-SHOP';
        transform: translateX(-102%);
    }

    41.666% {
        transform: translateX(0);
    }

    49.999% {
        transform: translateX(0);
    }

    58.333% {
        content: 'E-SHOP';
        transform: translateX(-102%);
    }

    66.666% {
        content: 'APLIKACE';
        transform: translateX(-102%);
    }

    74.999% {
        transform: translateX(0);
    }

    83.333% {
        transform: translateX(0);
    }

    91.666% {
        content: 'APLIKACE';
        transform: translateX(-102%);
    }
}

<div class="rotating-text-first block">
 <span id="rotating-text" class="block">
 </span>
</div>

To make the code even shorter, the following will do the same thing. For the above code to be more understandable, I wrote it long.

@keyframes spin {
    8.333%,
    16.666%,
    41.666%,
    49.999%,
    74.999%,
    83.333%{
        transform: translateX(0);
    }

    0%,
    24.999%{
        content: 'WEB';
        transform: translateX(-102%);
    }

    33.333%,
    58.333%{
        content: 'E-SHOP';
        transform: translateX(-102%);
    }

    66.666%,
    91.666%{
        content: 'APLIKACE';
        transform: translateX(-102%);
    }
}