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

Question

css

Good day, in the studio another question is "how to do this?"
www.nurseitmukaytegin.com/envato-templates/xen
There is a text animation on the slider in the header (the slider itself does not 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). Explain to the near-minded how to do this, and why (and how) are before and after used in the example?

Answer 1

https://codepen.io/nvdfxx/pen/JjdKQRY
In the same place, all css is available, what exactly is not clear?