JSFiddle - React, Tailwind, and code Playground

HTML

<div id="plav-text">
тут текст, который медленно<br>появляется.
</div>

CSS

#plav-text{display:none;}
#plav-text .new{opacity: 0;}
#plav-text .div_opacity{
-webkit-transition: opacity .1s ease-in-out;
-moz-transition: opacity .1s ease-in-out;
-ms-transition: opacity .1s ease-in-out;
-o-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
opacity: 1;}
.but{
	width: 100px;
	height: 100px;
	background-color: #777;
	display: none;
}

JavaScript

$.fn.animate_Text = function() {
    var string = this.html();
    $(this).html('');
    return this.each(function(){
        var $this = $(this);
        
        string.replace("<br>", "#").split('').forEach(s =>  s == "#" ? $this.append('<br>') :$this.append('<span class="new">'+s+'</span>'))
        //$this.html(string.replace(/./g, '<span class="new">$&</span>'));
        $this.find('span.new').each(function(i, el){
            setTimeout(function(){ $(el).addClass('div_opacity'); }, 59 * i);
        });
    });
};
$('#plav-text').show();
$('#plav-text').animate_Text();