<p>
  Refresh this page to re-run the demo.
</p>

<div>
  Why does Mary smell bad?
</div>
body {
  font-family: "Helvetica Neue", Helvetica;
  width: 90%;
  font-weight: 200;
  letter-spacing: 1px;
  margin: 25px auto 0 auto;
  background: rgb(234, 235, 235);
  color: rgb(25, 25, 25);
}

div, p {
  margin: 0 auto;
}

p {
  color: rgb(125, 125, 125);
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 17px;
}

div {
  width: 50%;
}

.blast {
  display: inline-block;
  color: red;
  opacity: 0;
}

.blast:nth-child(odd) {
  color: blue;
}
/* jquery.js */
/* jquery.velocity.js */
/* velocity.ui.js */

$("div")
  // Blast the text apart by letter.
  .blast({ delimiter: "letter" })
  // Slide the letters into view
  .velocity("transition.shrinkIn",
             { 
               display: null,
               stagger: 35,
               duration: 500,
               complete: function() {
                 // Reverse blast
                 $("div").blast(false);
               } 
             }
  );

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/velocity/0.11.6/jquery.velocity.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/velocity/0.11.6/velocity.ui.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/2/jquery.blast.js