<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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js