Animate.css 弄乱我的网站

Question

我一直在摆弄 animate.css，它完全搞砸了我的网站。我完全不确定原因。此外，我希望动画仅在 div 在视口中时发生，但我不确定该怎么做。

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

Answer 1

你可以使用 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>

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

Answer 2

将您的 .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 使以上两个成为可能。

Answer 3

您只需覆盖默认的 animate.css 行为。因为您已经在 css 中使用了转换，并且 animate.css 覆盖了您的 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);
  }
}

Animate.css 弄乱我的网站

Animate.css Messing Up My Site

html

css

viewport

visual-glitch