Apply CSS transition when element comes into viewport

Question

I'm trying to apply CSS transition effect when an element comes to viewport (i.e. when user scrolls to it), but not before.

I already know how to use CSS transitions, but how do I apply them only when the element comes to viewport?

What it the best way of doing this? If there's some library's to simplify the task, I would be glad to know.

Answer 1

Give CSS3 Animate It a go, makes the whole process as simple as adding a few clases.

http://jackonthe.net/css3animateit/

Then you can just add the classes like this to get started.

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