Untitled

dabblet.css

.rotulo {
  background: #000;
  height: 80px;
  position: relative;
  border:1px solid grey; 
  color: white;
}
.rotulo span {
  font-family: Arial, sans-serif;
  font-size:50px;
  padding: 10px;
  opacity: 0;
  text-transform: uppercase;
  position: absolute;
}
.rotulo span:nth-child(1) {
  opacity: 1;
  left: 100px;
  -webkit-transition: all .4s ease .5s;
     -moz-transition: all .4s ease .5s;
       -o-transition: all .4s ease .5s;
      -ms-transition: all .4s ease .5s;
          transition: all .4s ease .5s;  
}
.rotulo span:nth-child(2) {
  -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
       -o-transition: all .3s ease;
      -ms-transition: all .3s ease;
          transition: all .3s ease;
}
.rotulo span:nth-child(3) {
  -webkit-transition: all .3s ease .2s;
     -moz-transition: all .3s ease .2s;
       -o-transition: all .3s ease .2s;
      -ms-transition: all .3s ease .2s;
          transition: all .3s ease .2s;
}
.rotulo span:nth-child(4) {
  -webkit-transition: all .3s ease .4s;
     -moz-transition: all .3s ease .4s;
       -o-transition: all .3s ease .4s;
      -ms-transition: all .3s ease .4s;
          transition: all .3s ease .4s;
}
.rotulo span:nth-child(5) {
  -webkit-transition: all .3s ease .6s;
     -moz-transition: all .3s ease .6s;
       -o-transition: all .3s ease .6s;
      -ms-transition: all .3s ease .6s;
          transition: all .3s ease .6s;
}
.rotulo span:nth-child(6) {
  -webkit-transition: all .3s ease .7s;
     -moz-transition: all .3s ease .7s;
       -o-transition: all .3s ease .7s;
      -ms-transition: all .3s ease .7s;
          transition: all .3s ease .7s;
}
.rotulo span:nth-child(7),
.rotulo span:nth-child(8),
.rotulo span:nth-child(9),
.rotulo span:nth-child(10),
.rotulo span:nth-child(11) {
  -webkit-transition: all .3s ease .8s;
     -moz-transition: all .3s ease .8s;
       -o-transition: all .3s ease .8s;
      -ms-transition: all .3s ease .8s;
          transition: all .3s ease .8s;
}
.rotulo:hover span {
  opacity: 1;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

.rotulo:hover span:nth-child(1) {
  opacity: 0;
  left: 9999px;
  -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
          
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
      -ms-transition: all .5s;
          transition: all .5s;
}
.rotulo:hover span:nth-child(2) {
  left: 40px;
}
.rotulo:hover span:nth-child(3) {
  left: 90px;
}
.rotulo:hover span:nth-child(4) {
  left: 130px;
}
.rotulo:hover span:nth-child(5) {
  left: 180px;
}
.rotulo:hover span:nth-child(6) {
  left: 230px;
}
.rotulo:hover span:nth-child(7) {
  left: 270px;
}
.rotulo:hover span:nth-child(8) {
  left: 320px;
}
.rotulo:hover span:nth-child(9) {
  left: 370px;
}
.rotulo:hover span:nth-child(10) {
  left: 420px;
}
.rotulo:hover span:nth-child(11) {
  left: 470px;
}

dabblet.html

<div class="rotulo">
<span>Hover aquí</span><span>O</span><span>l</span><span>o</span><span>b</span><span>l</span><span>o</span><span>g</span><span>g</span><span>e</span><span>r</span>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}