CODEWITHSUNDEEP
csscss-animations
dualities
dualities

Reputation: 119

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

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!

Upvotes: 0

Views: 2038

Answers (2)

lvarayut
lvarayut

Reputation: 15259

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

Upvotes: 1

Sijav
Sijav

Reputation: 1525

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

Upvotes: 0

Related Questions