CSS Only Word Rotator

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

HTML Structure permalink

<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 use a container to center everything, and then we have a rotator-wrapper which holds the whole element. Inside it is an h1 tag with a span. This span has five other spans with the words we like to rotate.

CSS Rotator permalink

.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;
}

We give the main span inside 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;
}

For every child, 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 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! permalink

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