Question

我正在我的网站turbotobias.dk上运行飞机CSS动画-使用CSS动画时出现溢出问题。我已经尝试过用overflow-x：隐藏，也可以调整从左到左的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>

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

飞机动画出现溢出问题

1 个答案: