This post is part 3 of my series on animation. In this post, I’ll show you different animations you can add onto text. If you haven’t already, you should check out [part 1](https://brandonrozek.com/2015/09/animatable-box-model/) and [part 2](https://brandonrozek.com/2015/05/animatable-border/) of this series. Animations on text can be used to bring attention, to add importance, or to convey a point. As with all animations, however, keep your user in mind and your text readable.
<!--more-->
This post follows along with a [Codepen demo](http://codepen.io/brandonrozek/full/dYGwbE/){.broken_link} I made.
### line-height
* Accepts certain keywords, or any positive number or length
* Initial value: normal
Line-height is the space between each line in a text block. It is commonly recommended that you use a unitless line-height because then it takes the font-size into consideration. When you use an unitless value, the browser determines the line-height by taking the unitless value and multiplying it by the element’s font-size. In the Codepen demo (#1), you can see the line-height decreasing while the opacity increases.
* Accepts certain keywords or 100, 200, 300, 400, 500, 600, 700, 800, 900 (the higher the number, the darker the font-weight)
* Initial value: normal
Font-weight specifies the boldness of the text. If the typeface doesn’t come with multiple weights, then the animation would only happen between the weights that it does have. In the demo (#2), the text will go from normal weight to bold.
<pre><codeclass="language-css">
@keyframes font-weight {
to { font-weight: 900;}
}
.font-weight {
font-weight: 100;
animation: font-weight 2s linear .2s infinite alternate;
}
</code></pre>
### font-size
* Accepts any length
* Initial value: medium
It is important to note that changing the font-size could change the value of other text properties that are dependent upon it. (Like unitless line-heights) In the demo (#3), you can see the text’s font-size shrinking.
<pre><codeclass="language-css">
@keyframes font-size {
to { font-size: .1rem;}
}
.font-size {
font-size: 2rem;
animation: font-size 2s ease-out .1s infinite;
}
</code></pre>
### text-shadow
* Accepts a color and 3 lengths
* Color | Offset-X | Offset-Y | Blur-radius
* Initial value: none
Text-shadow applies a shadow to both the text and it’s text-decoration. Multiple shadows can be added, and they are applied from front to back. In the animation (#4), you can see the text’s shadow move.
<pre><codeclass="language-css">
@keyframes text-shadow {
to { text-shadow: 25px 10px 5px rgba(0, 0, 0, .9);}
This sets the color for [text-decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) (underlines, overlines, or strike-throughs) In the demo (#5), the strike-through changes from red to black.
<pre><codeclass="language-css">
@keyframes text-decoration-color {
to { text-decoration-color: black;}
}
.text-decoration-color {
text-decoration-color: red;
text-decoration-line: line-through;
animation: text-decoration-color 2s linear 0s infinite alternate;
}
</code></pre>
### word-spacing
* Accepts keywords or positive/negative length
* Initial value: normal
Word-spacing defines the space between tags and words. Negative values bring the words closer to each other. In the demo (#6), you can see the word-spacing increase with ‘good bye!’ where the word ‘bye!’ is moving away.
<pre><codeclass="language-css">
@keyframes word-spacing {
to { word-spacing: 5rem;}
}
.word-spacing {
word-spacing: normal;
animation: word-spacing 1s ease-in 0s infinite;
}
</code></pre>
### letter-spacing
* Accepts keywords or positive/negative length
* Initial value: normal
Letter-spacing specifies the spacing between text characters. Negative values bring the letters closer together. In the demo (#7), each letter gets separated from one another.
These animations show the different things you can do with text. Perhaps you’ll add a small animation to a heading to bring depth and attention, or you’ll add some to the text of a button to scream “call to action”. Whatever you decide, I hope this post helped. I’ll see you again next time with another animatable post! 🙂
