JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text">Какой-то текст.</div>

CSS

.text{
	display: none;
	margin: 200px 200px;
	position: relative;
	overflow: hidden;
}
.text:after{
	content: '';
	width: 50%;
	height: 100%;
	position: absolute;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 2;
}
.text:before{
	content: '';
	width: 50%;
	height: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	background: #fff;
	z-index: 2;
}
.text-animation.text{
	display: inline-block;
}
.text-animation.text:after{
	right: -55%;
	animation-name: animation-after;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}
.text-animation.text:before{
	left: -55%;
	animation-name: animation-before;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}

@keyframes animation-after {
	0%{
		right: 0;
	}
	100%{
		right: -55%;
	}
}
@keyframes animation-before {
	0%{
		left: 0;
	}
	100%{
		left: -55%;
	}
}

JavaScript

const text = document.querySelector('.text');

(() => {
	setTimeout(() => {
		text.classList.add('text-animation')
	},1000)
})();