How to make a similar animation in pure js/css?

Good day in the Studio the next question is "how to do this?"
www.nurseitmukaytegin.com/envato-templates/xen
On the slider in Hadera there is an animation of the text (the slider doesn't interest me), and I need to do the same and implement it without third-party js libraries, preferably without css libraries(it uses animate.css). Minded will explain how to do it, and why(and how) in the example used before and after?
April 7th 20 at 15:53
1 answer
April 7th 20 at 15:55
Solution
https://codepen.io/delilah/pen/JjdKQRY
There's also the entire TSSS available, what exactly is not clear?
It is not clear how to apply this animation in the same way, that is, pseudo-classes to work with a delay. In your example, I can't simulate :hover in js, as far as I know - missouri commented on April 7th 20 at 15:58
@Olin.Rice84, and what's this? hover is just a trigger for CSS, the same as the appearance of the item. Hang the class via JS, and CSS instead .t:hover:before -> .t.active:before. the delay of the pseudo - transition-delay if you want it to dynamically change to try and use CSS-variables - Colt58 commented on April 7th 20 at 16:01
@delilah, I tried to do like in the recommendation, but the styles through .t.active:before. not working, I can't make an appearance .t:before and .t:after smooth, as in a :hover (you in the example)

https://codepen.io/Olin.Rice84/pen/JjdRjjj - missouri commented on April 7th 20 at 16:04

Find more questions by tags AnimationCSSJavaScript