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

使用 CSS3，我们可以在从一种样式更改为另一种样式时添加效果，而无需使用 Flash 动画或 JavaScript。

为此，您必须指定两件事:

指定要添加效果的 CSS 属性并指定效果的持续时间。

例如:

<style> 
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}

div:hover
{
width:300px;
}

Try it yourself.你可以在W3schools中看到更多

或者如果你想使用 JQuery。这是一个例子:

$("div").hover(function() {
    $(this).addClass("slideInDown");
});

在你的情况下:

我创建了 div 来模拟你的情况:

div
{
width:100px;
height:100px;
background:red;
}

只需声明类和动画名称:

.sideInDown{
    animation:slideInLeft 5s;
-webkit-animation:slideInLeft 5s; /* Safari and Chrome */
}

创建关键帧:

@-webkit-keyframes slideInLeft {
0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
}

100% {
    -webkit-transform: translateX(0);
}
}

最后，使用 JQuery 在鼠标悬停事件发生时添加一个类:

$("div").hover(function() {
    $(this).addClass("sideInDown");
});

您可以从 my demo 查看它的行为方式