Animate.css портит мой сайт

Я играл с animate.css, и он полностью испортил мой сайт. Я не уверен в причине вообще. Также я хотел бы, чтобы анимация происходила только тогда, когда div находится в окне просмотра, и я не уверен, как это сделать.

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

Источник

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 по умолчанию. Потому что вы уже используете transform в вашем css, а 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);
  }
}
Источник

Вы можете использовать переполнение: скрытый

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

.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

Источник
Другие вопросы по тегам