Changing Words with CSS Animation

Sometimes we need to spin some words in a line of text. Whether we are creating a message box, alerting users, or describing features of something. In this regard, we always try to create something attractive. Of course! we use some CSS animations while creating attractive assets. So, today we are going to create changing word animation using pure CSS.

Yes, you heard right! we’ll change words using CSS without using JavaScript. Here I’ll show you two possible ways to change words with CSS animation. The first one is straightforward to display word after word with fading animation. The other one is word spinning animation while keeping other text static.

You can browse the demo page to check out the words changing animation before getting started with coding.

The HTML Structure

In HTML, create a container (a div element with the class name "container") and place your words with the following mentioned classes. In the following code example, you can place five words that will change with fading animation.

If you want to add more words, just create another div element with the class name "word" and "w6". Likewise, follow the same method for your upcoming words.

<div class="container">
  <div class="word w1">Welcome</div>
  <div class="word w2">to</div>
  <div class="word w3">Codeconvey</div>
  <div class="word w4">This is a pure CSS</div>
  <div class="word w5">Words Changing Animation</div>             
</div>

Another way to change only a word while keeping other text static, use the following HTML structure. You just need to create a span element with a unique id, like “spin”. In this way, we’ll use the CSS content attribute to spin the words.

<p>This is inline word changing animation <span id="spin"></span>!</p>

Changing Words with CSS Animation

In CSS, define some basic styles for text containers. The design for this container (shown on the demo page) is optional, you can modify it according to your needs. You just need to keep its position to relative.

.container {
  position: relative;
  max-width: 640px;
  text-align: center;
  height: 200px;
  line-height: 200px;
  margin: 20px auto;
  background: #e41b17;
  border-radius: 6px;
  color: #fff;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
}

After that, define the styles for words, set the font-size, font-weight, and other properties as you need. In “.word” selector, the position absolute and opacity 0 is necessary to work the animation. So, keep these values as it is.

.word {
  font-size:3em;
  font-weight:bold;
  opacity:0;
  position: absolute;
  width: 100%;
  text-align: center;
}

Now, define the CSS animation keyframes for words just like below:

@keyframes w1anim {
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  20% {
    opacity:0;
  }
}

@keyframes w2anim {
  20%{
    opacity: 0;
  }
  30%{
    opacity: 1;
  }
  40% {
    opacity:0;
  }
}

@keyframes w3anim {
  40%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  60% {
    opacity:0;
  }
}

@keyframes w4anim {
  60%{
    opacity: 0;
  }
  70%{
    opacity: 1;
  }
  80% {
    opacity:0;
  }
}

@keyframes w5anim {
  80%{
    opacity: 0;
  }
  90%{
    opacity: 1;
  }
  100% {
    opacity:0;
  }
}

Apply animation to words classes. If you want to run animation once, use the “forwards” instead of “infinite”.

.w1 {
  -webkit-animation: w1anim 20s infinite;
          animation: w1anim 20s infinite;
}

.w2 {
  -webkit-animation: w2anim 20s infinite;
          animation: w2anim 20s infinite;
}

.w3 {
  -webkit-animation: w3anim 20s infinite;
          animation: w3anim 20s infinite;
}

.w4 {
  -webkit-animation: w4anim 20s infinite;
          animation: w4anim 20s infinite;
}

.w5 {
  -webkit-animation: w5anim 20s infinite;
          animation: w5anim 20s infinite;
}

Now, we’ll define CSS styles for second words changing animation. Here, we’ll place the spin animation in after pseudo selector and define a set of words in animation keyframes.

#spin {
  color: yellow;
}
#spin:after {
  content:"";
  animation: spin 2s linear infinite;
}

Just place words in spin animation keyframes that described below:

@keyframes spin {
  0% { content:"ipsum"; }
  10% { content:"dolor"; }
  20% { content:"sit"; }
  30% { content:"amet"; }
  40% { content:"consectetur"; }
  50% { content: "adipisicing"; }
  60% { content: "elit"; }
  70% { content: "Hic"; }
  80% { content: "atque"; }
  90% { content: "fuga"; }
}

That’s all! I hope now you are able to change words using CSS only. If you have any questions or suggestions related to text effects, don’t hesitate to comment below.

You Might Be Interested In: