Какое свойство отвечает за запуск css анимации?

Question

[Underdoggit]

Всем привет, не хочу подгружать в проект animate.css, в виду ненужности большинства анимаций. Написал анимацию для блока, но она срабатывает при загрузке страницы. Какое свойство отвечает за отложенность анимации, нужно что бы срабатывала только при видимости блока пользователем. И можно ли это реализовать с помощью css, или нужен js для отслеживания?

Comments

[RAX7]

https://developer.mozilla.org/ru/docs/Web/CSS/anim...

Answer 1

[Антон Усачев]

Если я правильно понял, на лицо попытка сделать красивое появление элемента в момент, когда до него доскролливает юзер. Отследить его появление действительно можно только с js через $(window).scrollTop() и $(element).offset().top.

Однако есть и готовые решения. Пара из них вот это и вот это, сам часто использую.

Answer 2

[Шохрух Шаймардонов]

Animation-delay для отложенного запуска. Но не спасет с lazy-load (есть кончено хромовский lazy-load, который поддерживается далеко не всеми). Тут уже с js можно запустить для запуска при видимости

Comments

[Underdoggit]

lazy-load не используется в проекте, так что думаю проблем не возникнет. Но почитав про delay - скорее всего тут не подойдет, delay статичен, и если пользователь задержится на первом экране, анимация уйдет в воду.

[Rustam Bainazarov]

Underdoggit, плагин WOW.JS вам в помощь.
https://wowjs.uk/

CSS не отвечает за функциональную часть вопроса, поэтому узнать, что какой-то конкретный блок попал в зону видимости можно только с помощью JS.

[Шохрух Шаймардонов]

Underdoggit, ну я про это и говорил. В принципе, если запустите через js анимацию, будет проще. Чисто навешайте листенер на скрол ивэнте и вызовите анимацию, когда дойдёте до нужного места