JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<div>slide to unlock</div>

CSS

body {
    background-color: #333;
    color: #666;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 300%;
    letter-spacing: .05em;
}

div {
    padding: 1em;
    background-color: #222;
    text-align: center;
}

span {
  -webkit-animation: shimmer 1s 1;
     -moz-animation: shimmer 1s 1;
       -o-animation: shimmer 1s 1;
          animation: shimmer 1s 1;
}

span:nth-of-type(2) {
  -webkit-animation-delay: .1s;
     -moz-animation-delay: .1s;
       -o-animation-delay: .1s;
          animation-delay: .1s;
}

span:nth-of-type(3) {
  -webkit-animation-delay: .2s;
     -moz-animation-delay: .2s;
       -o-animation-delay: .2s;
          animation-delay: .2s;
}

span:nth-of-type(4) {
  -webkit-animation-delay: .3s;
     -moz-animation-delay: .3s;
       -o-animation-delay: .3s;
          animation-delay: .3s;
}

span:nth-of-type(5) {
  -webkit-animation-delay: .4s;
     -moz-animation-delay: .4s;
       -o-animation-delay: .4s;
          animation-delay: .4s;
}

span:nth-of-type(6) {
  -webkit-animation-delay: .5s;
     -moz-animation-delay: .5s;
       -o-animation-delay: .5s;
          animation-delay: .5s;
}

span:nth-of-type(7) {
  -webkit-animation-delay: .6s;
     -moz-animation-delay: .6s;
       -o-animation-delay: .6s;
          animation-delay: .6s;
}

span:nth-of-type(8) {
  -webkit-animation-delay: .7s;
     -moz-animation-delay: .7s;
       -o-animation-delay: .7s;
          animation-delay: .7s;
}

span:nth-of-type(9) {
  -webkit-animation-delay: .8s;
     -moz-animation-delay: .8s;
       -o-animation-delay: .8s;
          animation-delay: .8s;
}

span:nth-of-type(10) {
  -webkit-animation-delay: .9s;
     -moz-animation-delay: .9s;
       -o-animation-delay: .9s;
          animation-delay: .9s;
}

span:nth-of-type(11) {
  -webkit-animation-delay: 1s;
     -moz-animation-delay: 1s;
       -o-animation-delay: 1s;
          animation-delay:...

JavaScript

$("div").children().andSelf().contents().each(function(){
    if (this.nodeType == 3) {
        var $this = $(this);
        $this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
    }
});

// thanks mekwall