使用 css 变换在其父对象的宽度上对对象进行动画处理

我正在尝试使用 css 转换来转换 100% 宽度包装器内元素的位置来提高动画性能。因此，它从左侧进入屏幕并从右侧退出，然后重复动画。

我想我可以在这个动画中使用百分比。我发现翻译与您正在制作动画的对象相关。

因此，如果您有一个 100px 宽的对象，并且您按如下方式设置动画：

@keyframes moveme {
  0% { transform: translate(-100px, 150px) }
  100% { transform: translate(100%, 100px) }
}

对象将移动对象宽度的 200%，即 200px。

是否有修复方法可以使用关键帧动画中的 css 变换使对象移动到容器的宽度？

到目前为止，这是我的代码笔codepen.io/matttunney/pen/dPMQZL http://codepen.io/matttunney/pen/dPMQZL

Thanks

您可以在元素周围使用包装器，将包装器的宽度设置为 100%。并为其设置动画。

这样，正如您所说，翻译将应用于元素宽度，但元素宽度与容器宽度相匹配

.banner { 
  display:block;
  width:100%;
  height:300px;
  background:#0069aa;
  position:relative;
}
.moveme, .movewidth {
  position:absolute;
}
.movewidth {
  width:100px;
  height:100%;  
  background: #edaf02;
  transform: translate3D(0,0,10px)
}
.wrapper {
  width: 100%;
  animation: moveme 10s linear infinite;
}
.moveme { 
  background:#003356;
  width:100px;
  height:100px;  
  transform: translate3D(0,150px,20px)
}
@keyframes moveme {
  0% { transform: translate(0%, 150px) }
  100% { transform: translate(100%, 100px) }
}

demo http://codepen.io/anon/pen/gbrEON

正如 Simon_Weaver 指出的那样，有 2 个宽度为 100% 的元素会令人困惑；目前尚不清楚提出的解决方案是哪一个。

更好的演示

.banner { 
  display:block;
  width:400px;
  height:300px;
  background:#0069aa;
  position:relative;
}
.moveme, .movewidth {
  position:absolute;
}
.movewidth {
  width:100px;
  height:100%;  
  background: #edaf02;
  transform: translate3D(0,0,10px)
}
.wrapper {
  width: 100%;
  -webkit-animation: moveme 1s linear infinite;
  animation: moveme 1s linear infinite;
}
.moveme { 
  background:#003356;
  width:100px;
  height:100px;  
  transform: translate3D(0,150px,20px)
}
@keyframes moveme {
  0% { transform: translate(0%, 150px) }
  100% { transform: translate(100%, 100px) }
}
@-webkit-keyframes moveme {
  0% { transform: translate(0%, 150px) }
  100% { transform: translate(100%, 100px) }
}

  <div class="banner">
      <div class="movewidth">
      </div>
      <div class="wrapper">
      <div class="moveme">
      </div>
      </div>
    </div>