Home how to translateX an element proportionally to its own width and not its parent or screen width with pure CSS

Questions

how to translateX an element proportionally to its own width and not its parent or screen width with pure CSS

January 14, 2022

I am trying to adapt this pure CSS text scroll tutorial to my project. I found that it does not work when scrolled element width is longer than its container width. It stops scrolling too early while element is still visible.

I examined it a bit and managed to identify the problem but it is difficult for me to fix it as I do not really know much about CSS. Reason why it does not work is the final translateX(-100%) moves text by 100% of the container size, not the scrolled element size. This causes the animation to reset while text is still visible.

Please take a look at the snippet I prepared here below

.container {
  width: 200px;
  border: 1px solid black;
  overflow: hidden;
  white-space: nowrap;
}
.content {
  transformBox: content-box;
  MozTransform: translateX(-100%);
  WebkitTransform: translateX(-100%);
  transform: translateX(-100%);
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div class="container">
            <div class="content">
                now this is just some crazy long text, much wider than its parent container
            </div>
        </div>
    </body>
</html>

The expected result is: text should not be visible because it should be moved entirely to the left outside of the screen by transformX(-100%).

I think if someone finds how to transformX(-100%) by the element width, that would fix the problem with the scroller. I was researching it a bit and I found transform-box property that indicates the reference element to the CSS transform function. I did try all the possible values but it did not make any change and now I am out of ideas.

Anyone knows what else could be tried? Many thanks.

>Solution :

You need to use width into content rule width: fit-content;

.container {
  width: 200px;
  border: 3px solid black;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
}

.content {  
  /* animation properties */  
  width:fit-content;
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div class="container">
            <div class="content">
                now this is just some crazy long text, much wider than its parent container
            </div>
        </div>
    </body>
</html>