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.

Post and example of code you have made – web-tiki Jan 22 '14 at 15:35 — web-tiki, Jan 22 '14 at 15:35
Here you go - https://stackoverflow.com/a/26466655/104380 – vsync Jun 20 '17 at 07:55 — vsync, Jun 20 '17 at 07:55

score 16 · Answer 1 · answered Jul 19 '14 at 09:07

16

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

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

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

answered Jul 19 '14 at 09:07

Jack

1

Dead link, unfortunately. – Brad Dec 30 '21 at 00:09
@Brad new link: https://github.com/Jack-McCourt/css3-animate-it – ethry Mar 01 '22 at 07:35

1 Answers1