CSS Animate text from left to right in div container with overflow hidden

Question

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

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.

I stumbled upon some CSS Animations and tried this

@keyframes floatText{
  from {
    left: 0;
  }

  to {
    right: 0;
  }
}

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.

Thanks in advance!

EDIT:

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 :)!

Thanks again!

EDIT2:

Is there a way to accomplish something like this?

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

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

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 :(

Answer 1

You can stop when your text hits the right border

This solution uses CSS translate.

The trick is that translate's percentages are corresponding to the current element and left referrs to the parent.

Make sure your text's display property is NOT inline.

Downsides of this CSS only approach:

1. Shorter texts also get animated. To counter that consider JavaScript or make your text min-width: 100%;. This can lead to minimal wiggling by the animation.
2. All texts get the same amount of animation duration, which can be awful for long texts. Again, consider JavaScript (you'll want to look at scrollWidth) or make many animation classes, which can be very hard to manage.

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