使用CSS转换在对象的父对象的整个宽度上设置动画 [英] Animate a object across the width of its parent using css transforms

问题描述

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

I'm trying to improve my animation performance using css transforms to translate the position of an element inside a 100% width wrapper. So it enters the screen from the lefthand side and exits on the right, before repeating the animation.

我认为可以为该动画使用百分比。我发现的是，平移与您要设置动画的对象有关。

I figured I could use percentages for this animation. what I am finding is that translate is relative to the object you are animating.

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

So, if you have an object that is 100px wide and you set the animation as follows:

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

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

The object will move 200% of the objects width, so 200px.

是否可以通过在关键帧动画中使用CSS变换使对象移动到容器的宽度？

Is there a fix to make an object travel to the width of the container, using css transform in keyframe animation?

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

Here's my codepen so far codepen.io/matttunney/pen/dPMQZL

谢谢

推荐答案

您可以在元素周围使用包装器，将包装纸的宽度设置为100％。并对其进行动画处理。

You can use a wrapper around your element, set the width of the wrapper to 100%. and animate it.

这种方式是将平移应用于元素宽度，如您所言，但是元素宽度与容器宽度匹配

This way, the translate is applied to the element width, as you state, but the element width matches the container width

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

演示

Simon_Weaver指出，具有2个元素令人困惑宽度为100％；尚不清楚哪个是建议的解决方案。

As Simon_Weaver points out, it's confusing to have 2 elements with a 100% width; it's not clear which one is the one proposed as a solution.

更好的演示

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

这篇关于使用CSS转换在对象的父对象的整个宽度上设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！