Nov 18, 2022

# Solution 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%);
}
}
``````

# Problem :

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%;
}
}
``````