JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="parent">
  <span class="word">Every </span>
  <span class="word">day<br></span>
  <span class="word">and<br></span>
  <span class="word">every </span>
  <span class="word">night.</span>
</div>

CSS

.parent {
    padding: 30px;
    background: #efe;
  
}
.word {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.animate {
  opacity: 1;
}

JavaScript

$(document).ready(function() {
  $('.parent').hover(function() {
    $('.word').each(function(index) {
      var $this = $(this);
      setTimeout(function() {
        $this.css('display', 'inline'); // Показываем слово

        // С небольшой задержкой добавляем класс для плавной анимации
        setTimeout(function() {
          $this.addClass('animate');
        }, 50); // 50ms задержки, чтобы браузер применил display
      }, index * 500); // Задержка в 500ms для каждого слова
    });
  }, function() {
    // При уходе курсора убираем анимацию и скрываем слова
    $('.word').css('display', 'none').removeClass('animate');
  });
});