JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<h1 class="updn">
  h<span>e</span>llo
</h1>

<h1 class="updn">foobar</h1>

CSS

@keyframes flip {
  0%, 70%, 100% { transform: rotateX(0deg); }
  80%, 90% { transform: rotateX(180deg); }
}

.updn span {
  display: inline-block;
  animation: flip 0s ease-in infinite;
  transform-origin: 50% 100%;
  line-height: .75;
}

JavaScript

$('.updn').each(function() {
	if ($(this).find('span').length) {
  	$(this).find('span').each(function () {
    	$(this)
      	.css('animation-delay', (Math.random() * 6 - 3) + "s")
        .css('animation-duration', (Math.random() * 10 + 3) + "s");
    });
  } else {
    var text = $(this).text();
    $(this).empty();

    for (var i = 0; i < text.length; i++) {
      $(this).append(
        $('<span></span>').text(text[i])
          .css('animation-delay', (Math.random() * 5 - 3 + 1) + "s")
          .css('animation-duration', (Math.random() * 5 + 2) + "s")
      );
    }
  }
});