JSFiddle - React, Tailwind, and code Playground
HTML
<div class="animation">
<span>
ABCDEFHG
</span>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
background-color: #fff;
width: 0;
overflow: hidden;
}
.animation {
-webkit-transition: width .5s ease-in-out;
-moz-transition: width .5s ease-in-out;
-o-transition: width .5s ease-in-out;
transition: width .5s ease-in-out;
}
JavaScript
setTimeout(function () {
$('div').css('width', 'fit-content');
}, 1000);