使用 css 变换在其父对象的宽度上为对象设置动画

Question

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

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

因此，如果您有一个 100 像素宽的对象，并且您将动画设置如下：

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

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

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

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

谢谢

Answer 1

您可以在元素周围使用包装器，将包装器的宽度设置为 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

正如 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>

Answer 2

在@vals 的上述回答中，我们的总窗口宽度似乎在不断增加和减少。因此，我建议分别对父元素和子元素使用相对定位和绝对定位。 而对于动画，我们可以简单地根据父级的宽度改变移动容器的位置值（去掉 translateX() 的使用）。

如有错误请指正