Проблема переполнения с анимацией самолета - PullRequest
Новая
       27

Проблема переполнения с анимацией самолета

0 голосов
/ 02 мая 2019

На моем сайте turbotobias.dk я запускаю самолетную CSS-анимацию - у меня проблема с переполнением при использовании CSS-анимации. Я попытался с помощью overflow-x: hidden, а также отрегулировал px слева, но с трудом подгонял.

Как я могу решить эту проблему CSS? Могу ли я сделать анимацию справа налево более умной или есть какое-либо другое переполнение: скрыто; решения, которые я мог / должен использовать? 

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#animate {
  position: absolute;
  top: 30%;
  left: 100vw;
  background-image: url(https://www.turbotobias.dk/wp-content/uploads/2019/03/Fly-med-banner-TurboTobias-Graphics2.svg);
  width: 663px;
  height: 168px;
  animation: slideLeft 20s linear 0.1s infinite;
}

@keyframes slideLeft {
  from {
    left: 100vw;
  }
  to {
    left: -700px;
  }
}
<div id="animate"></div>

1 Ответ

1 голос
/ 02 мая 2019

Я бы рассмотрел фоновую анимацию, чтобы избежать проблемы переполнения. Также будет проще отрегулировать положение и размер изображения: 

body {
  min-height: 100vh;
  margin: 0;
  background-image: url(https://www.turbotobias.dk/wp-content/uploads/2019/03/Fly-med-banner-TurboTobias-Graphics2.svg);
  background-size:400px auto;
  background-repeat:no-repeat;
  animation:slideLeft 5s linear infinite;
}


@keyframes slideLeft {
  from {
    background-position:right -400px top 50%;
  }
  to {
    background-position:left -400px top 50%;
  }
}

Но для повышения производительности вы можете использовать псевдоэлемент и рассмотреть перевод, как показано ниже: 

body {
  min-height: 100vh;
  margin: 0;
  position:relative;
  overflow:hidden;
}
body:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-image: url(https://www.turbotobias.dk/wp-content/uploads/2019/03/Fly-med-banner-TurboTobias-Graphics2.svg);
  background-position:center;
  background-size:400px auto;
  background-repeat:no-repeat;
  animation:slideLeft 5s linear infinite;
  
}


@keyframes slideLeft {
  from {
    transform:translateX(100%);
  }
  to {
    transform:translateX(-100%);
  }
}
...