Question

我一直在玩animate.css，它完全搞砸了我的网站。我根本不确定原因。此外，我希望动画只在div位于视口中时发生，我不知道该怎么做。

https://road-aware.herokuapp.com/

Answer 1

您必须覆盖默认的animate.css行为。因为你已经在你的css和animate.css中使用了transform来覆盖你的css。 ;）

请参阅此setUrl

它没有浏览器前缀，但这应该不是什么大问题。 ;）

@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);
  }
}

Answer 2

你可以使用overflow：hidden

＆＃13;

<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>

＆＃13;

＆＃13; WIDTHOUT

＆＃13;

.examplediv
     {
      background-color:#efefef;
      border-style:solid #000000 1px;
        
     }
    #divid
    {
     position:absolute;
     left:450px; top:350px; width:35000px; height:35000px;
    
    }

＆＃13;

    <body>

      <div id="divid" class="examplediv">

      </div>

＆＃13;

http://www.css4you.de/overflow.html

Answer 3

将您的.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弄乱了我的网站

3 个答案: