Как анимировать текст с помощью CSS3?

Question

[rocknow]

Как сделать анимацию текста, как на этом сайте: www.aliadams.net ? Нахожу только разрозненные знания, собрать всё в кучу не могу.

Comments

[kulaeff]

А в чем затруднения? Общий алгоритм такой: подписываемся на скролл, в скролле проверям, если анимируемый элемент стал видимым, то анимируем его, добавляя элементу какой-то класс, в котором описаны CSS-правила для анимации.

Answer 1

[one_day]

я бы воспользовался связкой animate.css и wow.js
master-css.com/page/wowjs

Answer 2

[Максим Тимофеев]

Вот структурированные данные по анимации
https://html5book.ru/css3-animation/

Что бы сделать такую же анимацию как на Вашем примере, надо понять азы css анимации. Прицип будет такой. Отслеживаем с помощью js скролл, а точнее нахождения того или иного блока в зоне видимости ( Как отследить появление элемента в области видимости браузера? ) и добавляем класс, например '.imin'. Соответственно запуститься анимация связанная с классом. Например:

.someclass {color: green;}
.someclass.imin {
transition: color 1s ease; //описываем что менять, как и за какое время
color:red; //меняем цвет текста
}

Answer 3

[profesor08]

Вот так это анимируется: https://daneden.github.io/animate.css/