overflow hidden 的div容器中从左到右的CSS动画文本

Question

所以我最近在做一些私有(private)元素，因为我是 CSS 的 super 粉丝，所以我想用 CSS 而不是 JavaScript 来制作大部分动画。

今天我想创建这样的东西: Text moving from left to right

我认为这可以通过 CSS 动画实现。理论上，我有一个带有 position:relative、固定宽度和 overflow:hidden 的 div 包装器。在里面，有一个 div position:absolute和左:0 和底部:0。现在在某些情况下，文本对于父 div 来说太长了，我想让文本文本“ float ”通过父 div:实际上是将 div 从左:0 动画化到右:0。

我偶然发现了一些 CSS 动画并尝试了这个

@keyframes floatText{
  from {
    left: 0;
  }

  to {
    right: 0;
  }
}

在子 div 上。当然这没有用。从 left :0 到 left: -100px 的动画有效，但这并不能确保整个文本可见，当它比那些额外的 100px 长时。有没有一种干净利落的方法来完成这项工作？毫无疑问，JavaScript 可能会动摇这个想要的功能。但我想知道是否有一种方法可以在纯 CSS 中做到这一点。

提前致谢!

编辑:

为了澄清我的想法，我创建了一个 gif 来显示我想用 CSS 动画完成的事情: Animated

如您所见，我们有三个这样的并排在一起，一些有一个直接适合的名称，另一些可能太长并且应该来回动画，以便用户可以阅读:)!

再次感谢!

编辑 2:

有没有办法完成这样的事情？

@keyframes floatText{
  from {
    left: 0px;
  }

  to {
    left: (-this.width+parent.width)px;
  }
}

这将是最终的解决方案，我知道这种编码在 CSS 中是不可能的，但也许可以通过一些 CSS3 调整，如 calc() 或其他东西？我现在没主意了:(

Answer 1

当你的文本到达右边界时你可以停止

此解决方案使用 CSS translate。

诀窍在于 translate 的百分比对应于当前元素，而 left 指的是父元素。

确保文本的 display 属性是 NOT inline。

这种纯 CSS 方法的缺点:

1. 较短的文本也有动画效果。为了解决这个问题，请考虑使用 JavaScript 或使您的文本 min-width: 100%;。这可以使动画的摆动最小化。
2. 所有文本都有相同的动画持续时间，这对于长文本来说可能很糟糕。同样，考虑 JavaScript(您需要查看 scrollWidth)或制作许多动画类，这可能很难管理。

.animated {
  overflow: hidden;
  width: 11rem;
  white-space: nowrap;
}

.animated > * {
  display: inline-block;
  position: relative;
  animation: 3s linear 0s infinite alternate move;
}

.animated > *.min {
  min-width: 100%;
}

@keyframes move {
  0%,
  25% {
    transform: translateX(0%);
    left: 0%;
  }
  75%,
  100% {
    transform: translateX(-100%);
    left: 100%;
  }
}

/* Non-solution styles */

.container {
  display: flex;
  flex-wrap: wrap;
}

.animated {
  font-size: 2rem;
  font-family: sans-serif;
  border: 0.1rem solid black;
  margin: 1rem;
}

.animated > * {
  box-sizing: border-box;
  padding: .5rem 1rem;
}

<div class="container">

<div class="animated">
  <span>Short</span>
</div>
<div class="animated">
  <span class="min">Short</span>
</div>
<div class="animated">
  <span>Some more text</span>
</div>
<div class="animated">
  <span>A really long text to scroll through</span>
</div>

</div>