<section class="container">
<h2>Animating the CSS letter-spacing and word-spacing Properties</h2>
<div class="word-spacing">
<h1 class="animate-words">
The Adventures
of
Sherlock Holmes
</h1>
</div>
<div class="letter-spacing">
<h1 class="animate-letters">
The Adventures
of
Sherlock Holmes
</h1>
</div>
<button id="a">Animate!</button>
</section>
<p class="p">Demo by Antonietta Perna. <a href="http://www.sitepoint.com/css-properties-to-control-web-typography/" target="_blank">See article</a>.</p>
* {
box-sizing: border-box;
}
body {
background-color: #eee;
font-family: Verdana, Arial, sans-serif;
font-size: 100%;
font-weight: lighter;
line-height: 1.5;
color: #444;
background-color: #9e1620;
}
h1 {
font-weight: lighter;
font-family: Georgia, "Times New Roman", serif;
margin-bottom: 1em;
margin-top: 0;
line-height: 1.2;
}
h2 {
color: white;
font-family: Arial, sans-serif;
position: relative;
z-index: 10;
}
.container {
max-width: 100%;
min-width: 300px;
margin: 0 auto;
padding: 1em 2em;
text-align: center;
}
.container h1,
.container h2 {
text-align: center;
margin: 0;
}
.container p {
color: #eee;
margin-bottom: 1em;
padding: 1em;
}
.word-spacing {
background: #9e1620;
color: #eee;
padding: 1em;
}
.letter-spacing {
background: #9e1620;
color: #eee;
}
.animate-letters {
text-shadow: -1px 2px 2px #222;
letter-spacing: 0.2em;
transform: translateY(-6em);
white-space: pre-line;
opacity: 0;
z-index: 1;
transition: opacity 2s ease-in 1s,
transform 2s ease-in 1s,
letter-spacing 1s ease-in 2s;
}
.animated-letters {
letter-spacing: 0em;
opacity: 1;
transform: translateY(0);
}
.animate-words {
text-shadow: -1px 2px 2px #222;
white-space: pre-line;
opacity: 0;
word-spacing: 1em;
transform: translateY(-6em);
z-index: 2;
transition: opacity 2s ease-in 1s,
transform 2s ease-in 1s,
word-spacing 1s ease-in 2s;
}
.animated-words {
word-spacing: normal;
opacity: 1;
transform: translateY(0);
}
button {
font-weight: bold;
margin-top: 20px;
padding: 1em;
border-radius: 5px;
cursor: pointer;
}
.p {
text-align: center;
font-size: 13px;
padding-top: 130px;
color: white;
}
.p a {
color: white;
}
(function($) {
$('#a').on('click', function () {
var $animateLetters = $('.letter-spacing h1'),
$animateWords = $('.word-spacing h1');
$animateLetters.addClass('animated-letters');
$animateWords.addClass('animated-words');
});
})(jQuery);
This Pen doesn't use any external CSS resources.