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

我相信这是一个简单的答案，但我正试图找出如何隐藏下面的动画：直到它进入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

---

谢谢

你是说像这样的东西吗？

您需要将要设置动画的对象放置在div中，并将该div的溢出设置为overflow:hidden

---

希望它对CSS3有所帮助，我们可以在从一种样式更改为另一种样式时添加效果，而无需使用Flash动画或Java脚本

为此，必须指定两件事：

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

例如：

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

div:hover
{
width:300px;
}

在您的情况下：

我创建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");
});

---

你可以从

中看到它的作用，我们确实没有足够的信息。也许您可以为我们提供一个JSFIDLE或Codepen的工作版本

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