父项溢出时会弹出动画元素：隐藏

Question

我正在手机上建立网站。容器的宽度为100vw，高度为100vh的移动屏幕具有溢流y：隐藏，溢流x：滚动。图像比屏幕宽，并且应在水平位置滚动。当我向其中的几个添加动画时，动画图像会通过容器弹出并留出空白（您可以在右侧看到灰色空间）。

如何预防这种情况？

以下是我的页面示例：http://jsfiddle.net/do1nw92c/17/

vAxis:{
     baselineColor: '#fff',
     gridlineColor: '#fff',
     textPosition: 'none'
}

body {
  margin: 0;
  padding:0;
  .h-content {
    .homepage {
      overflow-y: hidden;
      overflow-x: scroll;
      width: 100%;
      height: 100vh;
      position: relative;
      -webkit-overflow-scrolling: touch;
      z-index: 0;
      background: #ccc;
      .clouds {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        height: 100%;
        width: auto;
        overflow: hidden;
        animation: clouds 1s linear infinite;
        display: inline-block;
      }
      .pipe {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        height: 100%;
        width: auto;
        animation: pipe 2s linear infinite;
        display: inline-block;
      }
      .background {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        height: 100%;
        width: auto;
        overflow: hidden;
        display: inline-block;
      }
    }
  }
}


@keyframes clouds {
  0% {
    opacity: 1;
    transform: translateX(0px);
  }
  50% {
    opacity: 0.9;
    transform: translateX(16px) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes pipe {
  0% {
    transform: translateX(0px) translateY(0px);
    opacity: 0;
  }
  30% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(8px) translateY(5px);
    opacity: 1;
  }
  100% {
    transform: translateX(0px) translateY(0px);
    opacity: 0;
  }
}