Применить переход CSS, когда элемент входит в область просмотра

Я пытаюсь применить эффект перехода CSS, когда элемент приходит в viewport (т.е. когда пользователь прокручивает его), но не раньше.

Я уже знаю, как использовать переходы CSS, но как их применять только тогда, когда элемент приходит в viewport?

Что это лучший способ сделать это? Если у вас есть библиотека, чтобы упростить задачу, я был бы рад узнать.

Ответы

Ответ 1

Дайте CSS3 Анимация Это поможет сделать весь процесс таким же простым, как добавление нескольких кланов.

http://jackonthe.net/css3animateit/

Затем вы можете просто добавить эти классы, чтобы начать.

<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>

Ответ 2

Вот отличная демонстрация:

Ввод слайдов (при прокрутке вниз) Коробки | CSS-Tricks http://bit.ly/19NN2NJ
Слайд из нижних ящиков - CodePen http://bit.ly/1dvNF9U

Может быть, это поможет вам увидеть точку. Точка обнаруживает видовое окно и применяет эффект только к Sscroll, как вы можете видеть в демо. Если вам нужна помощь с ошибкой или конкретной проблемой, просто отправьте источник:-), и я разрешу.