CSS在div容器中从左到右对文本进行动画处理，并隐藏了溢出 [英] CSS Animate text from left to right in div container with overflow hidden

问题描述

所以我最近正在从事一些私人项目，由于我是CSS的忠实粉丝，所以我想用CSS而不是JavaScript来制作大多数动画。

So i've recently working on some private project, and since i am a huge CSS fan i want to do most of the animations in CSS rather than in JavaScript.

今天，我想创建类似这样的东西：
文本从左向右移动

Today i wanted to create something like this: Text moving from left to right

我认为CSS动画有可能做到这一点。从理论上讲，我有一个div包装器，其位置：相对，固定宽度和溢出：隐藏。在内部，有一个div，其位置为：absolute，left：0和bottom：0。现在，在某些情况下，文本对于父div来说太长了，我想让文本文本通过父div浮动：实际上是使div从左：0到右：0动画化。

I think this might be possible with CSS Animations. In theory, I have a div wrapper with position:relative, a fixed width and overflow:hidden. Inside, there is a div with position:absolute and left:0 and bottom:0. Now in some cases, the text is too long for the parent div, and i wanted to let text text "float" though the parent div: actually animating the div from left:0 to right:0.

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

I stumbled upon some CSS Animations and tried this

@keyframes floatText{
  from {
    left: 0;
  }

  to {
    right: 0;
  }
}

。当然这是行不通的。动画从左：0到左：-100px起作用，但这不能确保整个文本长于其他100px时可见。有没有一种很好的方法可以使这项工作正常进行？当然，JavaScript可能会摇摆这种所需的功能。但是我想知道是否有办法在纯CSS中做到这一点。

on the child div. And of course this didn't worked. Animations like from left :0 to left: -100px work, but this doesn't ensure that the whole text is visible, when it is longer than those additional 100px. Is there a nice and clean way to make this work? Surely JavaScript might rock this desired functionality. But I'd wanted to know if there is a way to do this in pure CSS.

预先感谢！

编辑：

为了澄清我的想法，我创建了一个gif，显示了我想用CSS完成的工作动画：
动画

To clearify what I have in my mind, i've created a gif displaying what i want to accomplish with CSS animations: Animated

如您所见，我们彼此之间有三种类似的名称，有些具有直接适合的名称，有些则可能太长了，应该前后移动动画，以便用户可以阅读：）！

As you see, we have three of that kind next to each other, some have a name which fits directly, some others might be too long and should be animated forth and back, so the user can read it :)!

再次感谢！

EDIT2：

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

Is there a way to accomplish something like this?

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

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

这将是最终解决方案，我知道CSS中无法进行这种编码，但是可能需要进行一些诸如calc（）之类的CSS3调整？我现在没主意了：（

This would be the ultimate solution, I know that this kind of coding is not possible in CSS, but maybe with some CSS3 tweaks like calc() or something? I'm out of ideas now :(

推荐答案

将关键帧值更改为％

尝试一下

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>

这篇关于CSS在div容器中从左到右对文本进行动画处理，并隐藏了溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！