背景图片 CSS 动画答案

【问题标题】：Background image CSS animation背景图片 CSS 动画
【发布时间】：2018-04-03 16:52:08
【问题描述】：

我们在 Safari 中进行以下演示时遇到了这个空白问题 (http://take.ms/xuQJS)？

我们找不到问题的根源，感谢任何帮助。考虑到我们只想在动画中使用transform。

【问题讨论】：

【解决方案1】：

您的.scroll 太短。试试.scroll {width: 200%}。现在你有宽度100% 并且你移动你的元素-500px，所以会有间隙。

*, *:before, *:after {
  box-sizing: border-box;
}

@-webkit-keyframes scrollGood {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-500px, 0, 0);
            transform: translate3d(-500px, 0, 0);
  }
}
@keyframes scrollGood {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-500px, 0, 0);
            transform: translate3d(-500px, 0, 0);
  }
}
.pen {
  background-color: blue;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.panel {
  padding: 3rem;
  height: 100%;
}

.bottom {
  background-color: #31CC70;
  overflow: hidden;
  position: relative;
}
.bottom .scroll {
  background-image: url(http://scarbroughstudios.com/img/codepen.svg);
  background-position: center center;
  background-size: 500px;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 400%;
  width: 200%;
  z-index: 1;
  -webkit-animation: scrollGood 5s linear infinite;
  animation: scrollGood 5s linear infinite;
}

<section class="pen">
<div class="panel bottom">
  <div class="scroll"></div>
</div>
</section>

【讨论】：