CSS在div容器中从左到右动画文本,并隐藏溢出

Question

所以我最近正在开发一些私人项目,因为我是一个巨大的CSS粉丝,我想用CSS而不是JavaScript来做大部分动画.

今天我想创造这样的东西: 文字从左向右移动

我认为这可能适用于CSS动画.从理论上讲,我有一个div包装器,其位置为:relative,固定宽度和overflow:hidden.在里面,有一个div位置:绝对和左:0和底:0.现在在某些情况下,文本对于父div来说太长了,我想让文本文本"浮动"通过父div:实际上从左边动画div:0到右:0.

我偶然发现了一些CSS动画并试了一下

@keyframes floatText{
  from {
    left: 0;
  }

  to {
    right: 0;
  }
}

关于孩子div.当然,这没有奏效.动画如左:0到左:-100px工作,但这不能确保整个文本可见,当它比那些额外的100px更长时.是否有一个漂亮而干净的方法来完成这项工作？当然,JavaScript可能会撼动这种理想的功能.但是我想知道在纯CSS中是否有办法做到这一点.

提前致谢!

编辑:

为了清楚我的想法,我创建了一个显示我想用CSS动画完成的gif: 动画

如你所见,我们有三种相邻的,有些名称直接适合,有些可能太长,应该是前后动画,所以用户可以阅读:)!

再次感谢!

EDIT2:

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

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

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

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

Answer 1

您可以在文本到达右边框时停止

此解决方案使用 CSS translate。

诀窍是 thattranslate的百分比对应于当前元素并left引用父元素。

确保您的文本display属性不是 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>

Answer 2

更改关键帧值 %

尝试这个

body{ 
    overflow: hidden;
}
p{
    position: absolute;
    white-space: nowrap;
    animation: floatText 5s infinite alternate ease-in-out;
}

@-webkit-keyframes floatText{
  from {
    left: 00%;
  }

  to {
    /* left: auto; */
    left: 100%;
  }
}

<p>hello text</p>

Answer 3

为动画添加缓入输出以实现平滑度，并使用 % 而不是 px 来向左或向右移动。