-2

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

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

4

3 回答 3

1

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

请参阅此jsfiddle 示例

它没有浏览器前缀，但这应该没什么大不了的。;)

@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);
  }
}
于 2015-10-31T21:44:59.760 回答
0

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

于 2015-10-31T21:25:14.263 回答
0

你可以使用溢出：隐藏

<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

于 2015-10-31T21:09:54.910 回答