CSS3 Animation - How to hide an Animation until it enters a Div - css

Question

I'm sure it's a simple answer, but I'm trying to figure out how to hide the animation below: until it enters the div.
.slideInDown {
-webkit-animation-name: slideInDown;
-moz-animation-name: slideInDown;
-o-animation-name: slideInDown;
animation-name: slideInDown;
}
#-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
}
}
I want the final to look similar to the first animation in the center of this page: www.laracasey.com.
Thanks!

Answer 1

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
To do this, you must specify two things:
Specify the CSS property you want to add an effect to and Specify the duration of the effect.
For example:
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
Try it yourself. You can see more in W3schools
Or if you want to use JQuery. Here is an example :
$("div").hover(function() {
$(this).addClass("slideInDown");
});
In your case :
I create the div the simulate your situation:
div
{
width:100px;
height:100px;
background:red;
}
Simply declare the class and animation name :
.sideInDown{
animation:slideInLeft 5s;
-webkit-animation:slideInLeft 5s; /* Safari and Chrome */
}
Create the keyframs :
#-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
}
}
Finally, use the JQuery to add a class when a mouseover event happens:
$("div").hover(function() {
$(this).addClass("sideInDown");
});
You can see how it acts from my demo

Answer 2

you mean something like this one?
http://fiddle.jshell.net/sijav/PjEb5/
you need to place your thing to animate in the div and make the overflow of that div as overflow:hidden
hope it helps