css - CSS3 动画 - 如何隐藏动画直到它进入 Div

Question

我确定这是一个简单的答案，但我试图弄清楚如何隐藏下面的动画：直到它进入 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);
}
}

我希望最终看起来类似于此页面中心的第一个动画：www.laracasey.com。

谢谢！

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

你的意思是这样的吗？
http://fiddle.jshell.net/sijav/PjEb5/
你需要将你的东西放在 div 中进行动画处理，并使该 div 的溢出为溢出：hidden 希望它有所帮助