How to use CSS3 Animate It – Animate on Scroll
What is CSS3 Animate It?
CSS3 Animate It is a CSS animation library that animates elements onto screen as you scroll.
Include css3-animated.js at the end of your file and animations.css in the head.
On Scroll Basic Animations
So let’s animate some boxes as they come into view. We will make some 400px x 400px boxes and make them a color we can see. Then we can add our “animatedParent” class to a parent div and “animated *ANIMATION NAME*” to our box class.
If you want to only animate the element once then you just have to add the “animateOnce” class to the “animated” element and it will only animate into view once it’s scrolled over once, then stay there.
Keep in mind that the animation is triggered when the “animatedParent” class comes into view, not when the child element comes into view.
As you can see we have added some different examples of animations here. You can find the list of animations here.
So there are essentially 4 speeds for the animations. Normal, Slow, Slower and Slowest. It is quite easy to extend this if you look through the animation CSS file though.
So we can delay the starting of an animation using the delay class. All of the animation delay classes are listed below.
Here is an example of how these delayed animations are applied.
So if you want to run the animations one after the other then we can use the sequencing classes.
So first we are going to set the animation speed on the “animatedParent” element by adding “data-sequence=’500′” to the element.
Then we are going to number the child elements with “data-id=’1′”. So let’s see how this works in our example.
So as you can see you are only using the one “animatedParent” because you want to run the whole group once it comes into view.
So let’s say you want to offset the animation so it only animates once you have scrolled past it so far or if you want it to trigger before you hit the “animatedParent” element. You would do this using “data-appear-top-offset=’-300′”, this will start the animation once you have scrolled past the element by 300px.
Animating On Click
Animating an element on click works slightly differently because you don’t need to use an “animatedParent”. All you need to do is add an “animatedClick” to the button or link and add “data-target=’clickExample'” with the target class and then add your target class to the target element.