飞机动画的溢出问题

Question

我在我的网站上运行一架飞机 CSS 动画 turbotobias.dk - 我在使用 CSS 动画时遇到溢出问题。我已经尝试过 overflow-x: hidden 并且还调整了左边到左边的像素但是很难适应。

如何解决这个 CSS 问题？我可以使从右到左的动画更智能还是有其他溢出：隐藏；我 could/should 使用的解决方案？

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>

Answer 1

我会考虑背景动画以避免溢出问题。调整图片的位置和大小也会更方便：

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%);
  }
}

飞机动画的溢出问题

Overflow issue with airplane animation

css

animation

overflow

css-animations