当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Animate.css Messing Up My Site

问题描述:

Hello ladies and gentleman! I've been toying around with animate.css and it has completely messed up my website. I'm not sure of the cause at all. Also I would like the animation to only happen when the div is in the view-port and I'm not sure how to do so.

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

网友答案:

Change your .landing-container to:

.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;
}

Changing the position makes sure the element centers vertically. Removing left: 50% and adding margin: auto centers it horizontally. Adding the display: block makes the two above possible.

网友答案:

You have to just override default animate.css behaviour. Because you already use transform in your css and animate.css overrides your css. ;)

See this jsfiddle sample

It's without browser prefixes, but that should be not big deal. ;)

@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);
  }
}
网友答案:

you can use 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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: