CSS Animate Text from Left to Right in Div Container with Overflow Hidden

How can I make overflow text animate from left to right?

You don't need javascript you can make it in css like this following code

div{
    width: 100%;
    background-color: black;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
p{
    display: inline-block;
    color: #FFF;
    padding-left: 100%;
    animation: move 25s linear infinite;
}
@keyframes move {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

<div>
  <p>This text should scroll. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi commodi magni quo officia error ab veniam aspernatur. Quos ducimus, hic, maxime dicta optio quidem nostrum sint commodi velit, ut distinctio. And return to beginning.</p>
</div>

How can I get my text to scroll left and right only when its container is too small?

Solving the Design Issue

Deliberately designing your content to not fit within view might actually be the fundamental issue to solve here. Maybe it is better for users to show the content visibly without any need to scroll, animate, or script it.

There are many reasons not to animate stuff on your web page from problems you cause for groups of your users, to the pure distraction of moving things.

So, my main answer is you probably ought to design a different solution (such as, giving content enough space).

You'll find almost universally that the marquee tag is to be avoided (and that doesn't mean using a different tag and then animating it with CSS or JavaScript). However, we can still have some fun theoretically, just avoid in real life as it is deprecated.

Fun With Marquee

You can use alternate, with some additional non-breaking spaces to show the content in a visual feast of sliding text. I don't think this is good for your users, but marvel in the potential to have lots of moving things.

div[type=text] {
  border: solid 1px black;
  height: 20px;
  width: 100px;
  font-family: sans-serif;
  overflow: hidden;
}

<div type="text"><marquee behavior="alternate">    abcdefghijklmnopqrstuvwxyz    </marquee></div>

Using CSS to slide text from right to left until the end the text string

I have a similar need so here's the solution I've came up with.

transform: translateX(calc(-100% + 200px));

This did the trick for me.

Only issue is that the speed of the scrolling depends on the length of the text. It doesn't bother me so I won't be trying to 'fix' it.

:root {
  --slider-width: 400px;
}

body {
  background-color: gray;
}

.slider {
  width: var(--slider-width);
  height: 40px;
  overflow: hidden;
  background-color: blue;
  white-space: nowrap;
}

.text {
  font-size:26px;
  display: inline-block;
  animation: slide 20s linear infinite;
}

@keyframes slide {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(calc(-100% + var(--slider-width)));
    }
    
    100% {
        transform: translateX(0%);
    }
}

<div class="slider">
      <div class="text">
        Hello world, I need a very long text to show how the text will move
      </div>
    </div>

CSS Check If Element Is Overflowing Then Animate Back And Forth

Although a max width is set it is not being taken up on the smaller text - notice the widths of both examples are the same.

This snippet gives both the div and the h3 a position so that the widths are taken up and the div is set to have width fit-content (it will still obey the max-width).

The animation needs to take into account both the width of the container and the width of the text. It therefore uses left positioning and transition. For the shorter text they balance out so there is no movement. For the longer text the amount of movement is just the extra length of the text compared to the container.

.animated {
  position: relative;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  background: #0c0c0c;
  display: inline-block;
  width: fit-content;
  position: relative;
}

.text-animated {
  color: #fff;
  animation: backAndForth 5s linear infinite;
  display: inline-block;
  position: relative;
}

@keyframes backAndForth {
  0% {
    transform: translateX(0);
    left(0);
  }
  10% {
    transform: translateX(0);
    left: 0;
  }
  45% {
    transform: translateX(calc(-100%));
    left: 100%;
  }
  55% {
    transform: translateX(calc(-100%));
    left: 100%;
  }
  90% {
    transform: translateX(0);
    left: 0;
  }
  100% {
    transform: translateX(0);
    left: 0;
  }
}

<div class="animated">
  <h3 class="text-animated">
    Some Short Text
  </h3>
</div>
<span>Must be fixed</span>

<br><br><br>

<div class="animated">
  <h3 class="text-animated">
    Some Long And Bigger Text To Animate
  </h3>
</div>
<span>Must be Animated to view all text</span>

CSS: Overflow: hidden and translate X masks the rest of the sentence and just moves the letters over everything on its left

Yo should be moving the overflow: hidden to .scrolling-title-container. By putting it in .scrolling-title, your basically moving the box and saying nothing should go out of the box, which is redundant. But when the parent box has overflow: hidden, your saying the child can move but it cant go out of the parents box.

 .scrolling-title-container {
        position: relative;
        height: 100%;
        width: 250px;
        overflow: hidden;
    }

  .scrolling-title {
      position: absolute;
      max-width: 100%;
  }

   .animation {
      animation: scrollText 10s infinite linear;
   }

Make a smooth transition to items inside a container

for making the animation use @keyframes

and for making the text not visible if outside use overflow

forwards for saving the last keyframes of animation.

body {
  background: red
}

.container {
  background: white;
  color: black;
  padding: 20px;
  margin: 20px;
}

.container {
  overflow: auto; /* use "hidden" instead if it shows a unnecessary scrollbar. */
}

h1 {
  animation: toRight 0.2s ease-in forwards;
  transform: translateX(-50%);
}

@keyframes toRight {
  100% {
    transform: translateX(0);
  }
}

<div class="container">
  <h1>Hello world</h1>
</div>

CSS animate a div with absolute positioning from left 0 to right 0

You need to animate one property or the other. You can just animate left and either use left: calc(100% - elemWidth) (where elemWidth is the width of the element) or left: 100%; transform: translateX(-100%); if the width of the element is unknown.

Also need to animate background color.

.container { position: relative; width: 80%; height: 100px; border: 1px solid black;}
.animated { position: absolute; width: 20%; height: 100%; top: 0; background-color: red; animation: 3s linear 0s slide infinite;}
@keyframes slide {  from { left: 0; }  to {    left: 100%;    transform: translateX(-100%);    background: blue;  }}

<div class=container><div class=animated></div></div>

---

Related Topics