Rotating text animation CSS

Here’s a simple way to create a responsive changing or rotating text animation using HTML and CSS only.

Final output:

---

1. Add a div and place all your texts inside it.

<div class="rotating-text-wrapper">
    <h2>Welcome to Coding Yaar</h2>
    <h2>Here you will learn about</h2>
    <h2>HTML CSS Bootstrap</h2>
</div>

Add some styling to the texts.

.rotating-text-wrapper h2 {
  font-size: 2.5em;
  padding: 0.3em;
  margin: 0;
  color: #fff;
}
h2:nth-child(1) {
  background-color: lightseagreen;
}
h2:nth-child(2) {
  background-color: tomato;
}
h2:nth-child(3) {
  background-color: cornflowerblue;
}

Output:

2. Style the wrapper to place everything in the center.

.rotating-text-wrapper {
  height: 20em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

Let’s add the animation. We’ll add the CSS animation to all three texts separately, which run simultaneously. Set the animation duration to 6 seconds for all of them. And the animation-iteration-count to infinite so that it runs continuously.

.rotating-text-wrapper h2 {
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

For the first heading, add an animation-name rotating-text-1.

h2:nth-child(1) {
  animation-name: rotating-text-1;
}

Let’s add the keyframes. Since there are three lines, break the 6 seconds animation into three parts, 33%, 66%, and 99%.

We’ll use the transform translate property to change its position. We need the first text to start from the bottom and then get to the center.

So the first keyframe will go from 0 to 33%, wherein we’ll set the initial position to 200% and end at 100%, which would be in the center.

@keyframes rotating-text-1 {
  0% {
    transform: translateY(200%);
  }
  33% {
    transform: translateY(100%);
  }
}

Output:

3. Similarly, for the second and third texts.

h2:nth-child(2) {
  animation-name: rotating-text-2;
}

The second text animation will go from 33% to 66%. Its position will go from 100% and end at 0 as it is already at the center.

@keyframes rotating-text-2 {
  33% {
    transform: translateY(100%);
  }
  66% {
    transform: translateY(0);
  }
}

h2:nth-child(3) {
  animation-name: rotating-text-3;
}

And the third will start the animation at 66% upto 99% changing its position from 0 to -100%

@keyframes rotating-text-3 {
  66% {
    transform: translateY(0);
  }
  99% {
    transform: translateY(-100%);
  }
}

Output:

4. It’s moving right, but we don’t want them to overlap like this. So we’ll use the opacity property to display only one at a time.

Set the initial opacity to 0.

.rotating-text-wrapper h2 {
  opacity: 0;
}

Set the opacity of the first to 1 at 33%. And after it reaches the desired position, set it back to 0.

@keyframes rotating-text-1 {
  33% {
    transform: translateY(100%);
    opacity: 1;
  }
  34%{
    opacity: 0;
  }
}

Output:

5. For the second text, we need the opacity to remain 0 until the first text has disappeared. So set the opacity to 0 till 33% and change it to 1 at 66%. And set it back to 0 after it’s done.

@keyframes rotating-text-2 {
  33% {
    transform: translateY(100%);
    opacity: 0;
  }
  66% {
    transform: translateY(0);
    opacity: 1;
  }
  67%{
    opacity: 0;
  }
}

And the last one should be set to 1 after the second disappears.

@keyframes rotating-text-3 {
  66% {
    transform: translateY(-100%);
    opacity: 0;
  }
  99% {
    transform: translateY(-200%);
    opacity: 1;
  }
  100%{
    opacity: 0;   
  }
}

Output:

6. The last text seems to be running away at the end. To fix that, set its position to -100% at the end, where the opacity was set to 0.

@keyframes rotating-text-3 {
  100%{
    transform: translateY(-100%);
    opacity: 0;
  }
}

Output:

---

Final Output Code for Responsive Rotating text animation CSS:

HTML

<div class="rotating-text-wrapper">
    <h2>Welcome to Coding Yaar</h2>
    <h2>Here you will learn about</h2>
    <h2>HTML CSS Bootstrap</h2>
</div>

CSS

.rotating-text-wrapper {
  height: 20em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.rotating-text-wrapper h2 {
  color: #fff;
  font-size: 2.5em;
  padding: 0.3em;
  margin: 0;
  opacity: 0;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}
.rotating-text-wrapper h2:nth-child(1) {
  animation-name: rotating-text-1;
  background-color: lightseagreen;
}
@keyframes rotating-text-1 {
  0% {
    transform: translateY(200%);
  }
  33% {
    transform: translateY(100%);
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
}
.rotating-text-wrapper h2:nth-child(2) {
  animation-name: rotating-text-2;
  background-color: tomato;
}
@keyframes rotating-text-2 {
  33% {
    transform: translateY(100%);
    opacity: 0;
  }
  66% {
    transform: translateY(0);
    opacity: 1;
  }
  67% {
    opacity: 0;
  }
}
.rotating-text-wrapper h2:nth-child(3) {
  animation-name: rotating-text-3;
  background-color: cornflowerblue;
}
@keyframes rotating-text-3 {
  66% {
    transform: translateY(0);
    opacity: 0;
  }
  99% {
    transform: translateY(-100%);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@media screen and (max-width: 576px) {
  .rotating-text-wrapper {
    font-size: 0.7rem;
  }
}

Video tutorial for Responsive Rotating text animation CSS:

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.