Question

我尝试使用css变换来改善我的动画效果，以便在100％宽度的包装中转换元素的位置。因此，在重复动画之前，它从左侧进入屏幕并在右侧退出。

我想我可以使用这个动画的百分比。我发现的是，翻译与你动画的对象有关。

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

@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％令人困惑;它不清楚哪一个是作为解决方案提出的那个。

更好的演示

＆＃13;

.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) }
}

＆＃13;

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

＆＃13;

Answer 2

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

如果错了请查收

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

2 个答案: