Rotating Text with CSS Animations

Over the weekend I was playing around with HTML templates. I ended up stumbling across this super cool one that also just so happens to be free, so I downloaded it and began playing with it in my file manager. You have to remember that I’m kind of learning this stuff on the fly solely through exploration, and I’ve found that one of the best ways to learn is to take someone else’s code and tweak it/transform it until its something completely different. In the same way that a SPLOT might be easier to work from than a blank WordPress instance, an HTML site template is easier to start with than a blank index.html file.

^So once installing the theme on my site, this was what I was met with. I immediately changed the images, text, and colors to start to make it my own. But then I was inspired to learn how to add rotating text in place of ‘graphic & UI/UX designer based in Somewhere.’ I’ve always wanted to know what that looks like on the back end, and turns out it’s not too complicated!

I owe a lot of this to my greatest discovery of the weekend, Codepen.io. In searching online for how to add rotating text, I found this page, which basically did the bulk of the work for me. I was able to play around with the animation that I wanted to use, simplify the code, and make changes in real time. For the purposes of documenting here as well, here is Codepen’s template for HTML that I used:

<section class="wrapper">
  
  <h2 class="sentence">Janie is a lovely girl and she is very
    <div class="slidingVertical">
      <span>Amazing.</span>
      <span>Beautiful.</span>
      <span>Cute.</span>
      <span>Delightful.</span>
      <span>Emotional.</span>
    </div>
  </h2>

</section>

And here is the template for CSS:

/*Sentence*/
.sentence{
     color: #222;
     font-size: 30px;
     text-align: left;
}
/*Wrapper*/
.wrapper{
    background-color: #f5f5f5;
    font-family: 'Raleway', sans-serif;
    margin: 100px auto;
    padding: 40px 40px;
    position: relative;
    width: 70%;
}

/*Vertical Sliding*/
.slidingVertical{
	display: inline;
	text-indent: 8px;
}
.slidingVertical span{
	animation: topToBottom 12.5s linear infinite 0s;
	-ms-animation: topToBottom 12.5s linear infinite 0s;
	-webkit-animation: topToBottom 12.5s linear infinite 0s;
	color: #00abe9;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingVertical span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
	animation-delay: 10s;
	-ms-animation-delay: 10s;
	-webkit-animation-delay: 10s;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateY(-50px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: translateY(-50px); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: translateY(-50px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

Now you’ll notice in my original GIF that I’m only using 3 words: writer, designer, and technologist. The template, however, is using 5 words: amazing, beautiful, cute, delightful, and emotional. This difference is actually quite important, and one that took me a moment to understand.

Because I don’t have a 4th or 5th word in the rotation, I no longer need the following from the HTML template:

     <span>Delightful.</span>
     <span>Emotional.</span>

Which means I no longer need this in the CSS template:

.slidingVertical span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}

This is where it got a little tricky for me. Once those above sections are deleted, the template rotation would run through amazing, beautiful, and cute like normal, but would then pause for about 3-5 seconds before restarting the cycle. See below:

(^This GIF adds a black screen at the end, but you get the idea.)

I found that the fix for this was to edit the bolded portion of this CSS:

.slidingVertical span{
	animation: topToBottom 12.5s linear infinite 0s;
	-ms-animation: topToBottom 12.5s linear infinite 0s;
	-webkit-animation: topToBottom 12.5s linear infinite 0s;
	color: #00abe9;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}

It makes total sense now that I’ve figured it out, but for some reason, in the moment I looked past those lines dozens of times. Now that I’ve removed 2 words, it no longer takes 12.5 seconds to run through the entire rotation top to bottom. So, I brought those numbers down to 7.5s and it began working perfectly.

So when all was said and done, I added the following lines of HTML to my index.html file:

<section class="wrapper">
     <h1 class="sentence">I am Lauren Brumfield. <br> I am a
     <div class="slidingVertical">
          <span>writer.</span>
          <span>designer.</span>
          <span>technologist.</span>
     </div>
     </h1>
</section>

I then added the following CSS to my main.css file:

/* -------------------------------------------------------------- 
 * ## text rotator
 * -------------------------------------------------------------- */

/*Sentence*/
.sentence{
     text-align: left;
     color: #222;
     font-size: 30px;
}
/*Wrapper*/
.wrapper{
    margin: 100px auto;
    position: relative;
    width: 100%;
}

/*Vertical Sliding*/
.slidingVertical{
	display: inline;
	text-indent: 8px;
}
.slidingVertical span{
	animation: topToBottom 7.5s linear infinite 0s;
	-ms-animation: topToBottom 7.5s linear infinite 0s;
	-webkit-animation: topToBottom 7.5s linear infinite 0s;
	color: #809cad;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingVertical span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}


/*topToBottom Animation*/
@-moz-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateY(-50px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: translateY(-50px); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: translateY(-50px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

And there you have it! I now have rotating text in my header.