Как сделать подобную анимацию на чистом js/css?

Question

[Ratibor Shugaev]

Доброго времени суток, в студии очередной вопрос "как сделать вот это?"
www.nurseitmukaytegin.com/envato-templates/xen
На слайдере в хэдере есть анимация текста (сам слайдер меня не интересует), и мне нужно сделать такую же и реализовать это без сторонних js-библиотек, желательно и без css-библиотек(там используется animate.css). Разьясните недалекому, как это сделать, и для чего(и как) в примере используются before и after?

Answer 1

[nvdfxx]

https://codepen.io/nvdfxx/pen/JjdKQRY
Там же весь цсс доступен, что конкретно непонятно?

Comments

[Ratibor Shugaev]

Не понятно, как применять данную анимацию таким же образом, т е чтобы псевдоклассы сработали с задержкой. На вашем примере, я не могу имитировать :hover в js, насколько мне известно

[nvdfxx]

Ratibor Shugaev, а при чем тут это? ховер - просто триггер для цсс, такой же, как и появление класса у элемента. Вешайте класс через жс, а в цсс вместо .t:hover:before -> .t.active:before. задержка у псевдоэлементов - transition-delay, если хотите ее динамически менять, юзайте цсс-переменные

[Ratibor Shugaev]

nvdfxx, я попробовал сделать примерно как в рекомендации, но стили через .t.active:before. не работают, у меня не получается сделать появление .t:before и .t:after плавным, как при :hover (у вас в примере)

https://codepen.io/ratibordas/pen/JjdRjjj