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 and part 2 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.

This post follows along with a Codepen demo{.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.

font-weight

• 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.

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.

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.

text-decoration-color

• Accepts a color value
• Initial value: currentColor

This sets the color for text-decoration-line (underlines, overlines, or strike-throughs) In the demo (#5), the strike-through changes from red to black.

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.

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.

Conclusion

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! 🙂

The links

https://docs.webplatform.org/wiki/css/properties/line-height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height https://docs.webplatform.org/wiki/css/properties/font-weight{.broken_link} https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight https://docs.webplatform.org/wiki/css/properties/font-size{.broken_link} https://developer.mozilla.org/en-US/docs/Web/CSS/font-size https://docs.webplatform.org/wiki/css/properties/text-shadow{.broken_link} https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow https://docs.webplatform.org/wiki/css/properties/text-decoration-color{.broken_link} https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color https://docs.webplatform.org/wiki/css/properties/word-spacing{.broken_link} https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing https://docs.webplatform.org/wiki/css/properties/letter-spacing{.broken_link} https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing