Rotating Words with CSS Animations

Using CSS Animations we will change or rotate some parts of a sentence.


Rotating Words with CSS Animations

View demo Download source

In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations.

Please note: the result of this tutorial will only work as intended in browsers that support CSS animations.

So let’s start!

In the following, we’ll be going through demo 2.

The Markup

We’ll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words:

<section class="rw-wrapper">
	<h2 class="rw-sentence">
		<span>Real poetry is like</span>
		<span>creating</span>
		<div class="rw-words rw-words-1">
			<span>breathtaking moments</span>
			<span>lovely sounds</span>
			<span>incredible magic</span>
			<span>unseen experiences</span>
			<span>happy feelings</span>
			<span>beautiful butterflies</span>
		</div>
		<br />
		<span>with a silent touch of</span>
		<div class="rw-words rw-words-2">
			<span>sugar</span>
			<span>spice</span>
			<span>colors</span>
			<span>happiness</span>
			<span>wonder</span>
			<span>happiness</span>
		</div>
	</h2>
</section>

Now, ignoring the garbage placeholder text, we want each span of the rw-word to appear at a time. For that we’ll be using CSS animations. We’ll create one animation for each division and each span will run it, just with different delays.
So, let’s look at the CSS.

The CSS3

First, we will style the main wrapper and center it on the page:

.rw-wrapper{
	width: 80%;
	position: relative;
	margin: 110px auto 0 auto;
	font-family: 'Bree Serif';
	padding: 10px;
}

We’ll add some text shadow to all the elements in the heading:

.rw-sentence{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

And add some specific text styling to the spans:

.rw-sentence span{
	color: #444;
	white-space: nowrap;
	font-size: 200%;
	font-weight: normal;
}

The divisions will be displayed as inline elements, that will allow us to “insert” them into the sentence without breaking the flow:

.rw-words{
	display: inline;
	text-indent: 10px;
}

Each span inside of a rw-words div will be positioned absolutely and we’ll hide any overflow:

.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: 100%;
	color: #6b969d;
}

Now, we’ll run two animations. As mentioned previously, we’ll run the same animation for all the spans in one div, just with different delays:

.rw-words-1 span{
	animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
	animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
	animation-delay: 3s; 
	color: #6b889d;
}
.rw-words span:nth-child(3) { 
	animation-delay: 6s; 
	color: #6b739d;	
}
.rw-words span:nth-child(4) { 
	animation-delay: 9s; 
	color: #7a6b9d;
}
.rw-words span:nth-child(5) { 
	animation-delay: 12s; 
	color: #8d6b9d;
}
.rw-words span:nth-child(6) {  
	animation-delay: 15s; 
	color: #9b6b9d;
}

Our animations will run one cycle, meaning that each span will be shown once for three seconds, hence the delay value. The whole animation will run 6 (number of images) * 3 (appearance time) = 18 seconds.
We will need to set the right percentage for the opacity value (or whatever makes the span appear). Dividing 6 by 18 gives us 0.333… which would be 33% for our keyframe step. Everything that we want to happen to the span needs to happen before that. So, after tweaking and seeing what fits best, we come up with the following animation for the first words:

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
	25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

We’ll fade in the span and we’ll also animate its height.

The animation for the words in the second div will fade in and animate their width. We added a bit to the keyframe step percentages here, because we want these words to appear just a tiny bit later than the ones of the first word:

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
	20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

And that’s it folks! There are many possibilities for the animations, you can check out the other demos and see what can be applied!

Demos

  1. Demo 1: Animate down
  2. Demo 2: Animate height and width
  3. Demo 3: Fade in and “fall”
  4. Demo 4: Animate width and fly in
  5. Demo 5: Rotate in 3D and “sharpen”

I hope you enjoyed this tutorial and find it inspiring!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 45

Comments are closed.
  1. 1

    Codrops rocks. i have never seen such typo. i have just published short review on

  2. 2

    Your tutorials, Mary Lou, are by far my favorite on the web! seriously good job! :)

  3. 4

    Hi, Really cool!!!

    Is there a way around for displaying a similar if not same effect on IE or even just change the words at an interval?

    • 5

      I’m having issues with IE as well. All I want it to do is say, you’re missing out and then direct them to get chrome, if they are using IE…

    • 6

      but the code is awesome and very inspiring… I did not mean to sound cras

  4. 7

    Codrops always gives the best tutorials.But one concern is that i am an amateur developer so my suggestion is it would be better to give the links of documentation of some stuff like keyframes–why those percentages?Its parameters and possible values?..i can google it through the web and find out but a link in this page would be better.

    Thank you

  5. 10

    Great effects; this is a worthy alternative to setting up a slider, for real simple transitions of text only. I would not have thought of using the animation delays to do this with CSS only. Demo 1 and 5 look ready for use, and 4 could work with a little tweaking of the fades. I’d consider for some medium-importance areas, perhaps a blockquote/pullquote type aside, until the browser support is there. It’s too bad we’ll have to wait for IE10 for CSS transitions/animations.

  6. 11

    The best web I’ve ever seen with really useful tutorials, they’re nice, they’re easy, and the best: they work! Congratulations from Barcelona.

  7. 19

    Amazing! Now how would I go about putting one of these pages on a WordPress site? Is there a tutorial somewhere on how to do this?

  8. 20

    Hi, i like this plugin, however it has a problem (or is it my browser -chrome). It works ok at first but then no words appear at all and then they all jumble up and appear together, then there is a long pause and then 2 words appear correctly and then the cycle of multiple words appearing simultaneously and not in sequence happens. any soultions?

    it happens on your demo as well demo 1 and demo 4.

    I used it on this site: http:// http://www.mytimelyne.com

    • 21

      Hi Philip, I guess there is something different in the new version of Chrome (and Safari), since this was not happening before… It get’s really obvious when changing tabs and then coming back. In Firefox it works just fine but in Safari the same thing happens. It seems like the timing get’s screwed, as if the animation pauses… Thanks for your feedback, cheers, ML

  9. 22

    Hey Mary Lou

    Gotta tell ya I love this one! As an owner of a web-design firm that does not only design, but SEO work; it is always good to see new creative ways to get rich keywords into text.

    Whats more is each one of these can be hyper-linked either internally of externally. We all know clients love pretty colors and movement, but the ability to sell this effect as an SEO plus is a double whammy. :)

Comments are closed.