/* Base: ogni lettera è un inline-block invisibile finché non parte l'animazione */
.animate span {
  display: inline-block;
  opacity: 0;
}

/* Effetto "One": revolve + scale */
.animate.one span {
  transform: translate(-150px, -50px) rotate(-180deg) scale(3);
  animation: revolveScale .4s forwards;
}

/* Keyframes */
@keyframes revolveScale {
  60% {
    transform: translate(20px, 20px) rotate(30deg) scale(.3);
  }
  100% {
    transform: translate(0) rotate(0) scale(1);
    opacity: 1;
  }
}