Есть ли CSS-анимация при прокрутке до элемента?

Question

[DrunkMaster]

Есть пример CSS-анимации https://jsfiddle.net/82h2cLLf/ работает по событию hover.
1) Как сделать так что бы анимация начиналась при попадании в видимую область экрана (прокрутке до элемента)
2) Можно ли это сделать на CSS или только на JS
3) Если можно на CSS, то как сделать так что бы при прокрутке обратно (вверх) анимация уже не работала?

Comments

[Леонид Князев]

только на JS

[Kovalsky]

1) wow.js,
2) CSS+JS, других вариантов нет и это логично,
3) wow.js

Answer 1

[maxsnw]

wow.js либо самому отслеживать попадание в зону видимости. В CSS мне такие извращения не известны :)

Comments

[DrunkMaster]

Про wow.js знаю. Ок, на какие события можно повесить анимацию в CSS на смартфоне, учитывая, что мышки нет? Первое появление на странице, клик. Что-то ещё?

[maxsnw]

DrunkMaster, попадание viewport и присваивание элементу класса с анимацией например)

[Егор Живагин]

DrunkMaster, имеете ввиду, повесить через JS (иначе я не понимаю, как вы клик или первое появление отловите на CSS) ? На тот же hover, ...
Зачем на события вешать? При скролле страницы считайте прокрутку экрана, высоту экрана и высоту от начала страницы до нужного элемента (каждое действие - одна строчка, погуглите). Исходя из этих значений вешайте на объект класс с анимацией.

Answer 2

[Владимир Ковалев]

https://codepen.io/KyloDean/pen/ozXyBv

Может помощет