CSS Only Word Rotator

You probably have seen these word rotators on people's portfolio or websites.
They are cool and quirky and rotate random words about that person or business.
Today we are looking into making that just with CSS!

HTML Structure

<div class="container">
  <div class="rotator-wrapper">
    <h1>
      Daily Tips about:&nbsp;
      <span class="rotator">
        <span>JavaScript</span>
        <span>CSS</span>
        <span>VanillaJS</span>
        <span>Node</span>
        <span>React</span>
      </span>
    </h1>
  </div>
</div>

As you can see above we are using a container to center everything and then we have a rotator-wrapper which holds the whole element.
Inside it is a h1 tag with a span, this span has 5 other spans with the words we like to rotate.

CSS Rotator

.rotator-wrapper {
  position: relative;
}
.rotator-wrapper span {
  display: inline-block;
  min-width: 155px;
  text-align: left;
}
.rotator-wrapper span span {
  position: absolute;
  font-weight: bold;
  top: -0px;
  opacity: 0;
  animation: rotateWord 18s linear infinite 0s;
  color: #ffe74c;
}
.rotator-wrapper span span:nth-child(2) {
  animation-delay: 3s;
}
.rotator-wrapper span span:nth-child(3) {
  animation-delay: 6s;
}
.rotator-wrapper span span:nth-child(4) {
  animation-delay: 9s;
}
.rotator-wrapper span span:nth-child(5) {
  animation-delay: 12s;
}
@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    transform: translateY(0px);
  }
  15% {
    opacity: 1;
    transform: translateY(0px);
  }
  20% {
    opacity: 0;
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

So what's happening here. Let's see item per item.

.rotator-wrapper {
  position: relative;
}

This is the complete wrapper and needs to be relative for the absolute items to sit in.

.rotator-wrapper span {
  display: inline-block;
  min-width: 155px;
  text-align: left;
}

The main span inside we give a minimum width to keep inline centered.

.rotator-wrapper span span {
  position: absolute;
  font-weight: bold;
  top: -0px;
  opacity: 0;
  animation: rotateWord 18s linear infinite 0s;
  color: #ffe74c;
}

Then every rotating word we make position: absolute; and invisible from the start.
We then add our rotateWord animation.

.rotator-wrapper span span:nth-child(2) {
  animation-delay: 3s;
}

Every child after we increase the animation-delay by 3 seconds.

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    transform: translateY(0px);
  }
  15% {
    opacity: 1;
    transform: translateY(0px);
  }
  20% {
    opacity: 0;
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

Our actual animation is happing in this keyframe animation function.
We start off with opacity: 0 and slowly translate the item from the top to center with opacity: 1. After that we do the opposite to hide it.

You can see this in action on this Codepen.

See the Pen CSS Only Word Rotator by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter