我一直在玩animate.css，它完全搞砸了我的网站。我根本不确定原因。此外，我希望动画只发生在div在视口中时，我不知道该怎么做。
将您的.landing-container更改为：
.landing-container {
text-align: center;
position: relative;
top: 50%;
padding: 15px 0;
box-sizing: border-box;
width: 80%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin: auto;
display: block;
}
更改position可确保元素垂直居中。删除left: 50%并添加margin: auto使其水平居中。添加display: block使上述两个成为可能。
您必须覆盖默认的animate.css行为。因为你已经在你的css和animate.css中使用了transform来覆盖你的css。 ;）
看到这个jsfiddle sample
它没有浏览器前缀，但这应该不是什么大问题。 ;）
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(-50%, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(-50%, -40%, 0);
}
75% {
transform: translate3d(-50%, -60%, 0);
}
90% {
transform: translate3d(-50%, -45%, 0);
}
to {
transform: translate3d(-50%, -50%, 0);
}
}
你可以使用overflow：hidden
<style type="text/css">
.examplediv {
background-color:#efefef;
border-style:solid #000000 1px;
}
#divid {
position:absolute;
left:450px; top:350px; width:35000px; height:35000px;
overflow:scroll;
}
</style>
<body>
<div id="divid" class="examplediv">
...
</div>.examplediv
{
background-color:#efefef;
border-style:solid #000000 1px;
}
#divid
{
position:absolute;
left:450px; top:350px; width:35000px; height:35000px;
} <body>
<div id="divid" class="examplediv">
</div>