Get width of text to use in CSS scroll animation

Issue

I have a text animation that scrolls text from left to right and back so the full text can be seen and isn't cut off. I have an example below:

.selectionContainer {
  max-width: 150px;
  overflow: hidden;
}

.link {
  white-space: nowrap;
  display: inline-flex;
  overflow: visible !important;
}

.link_animated {
  animation: backAndForth 5s linear infinite;
}

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

.HS-Silk-Image {
  height: 30px;
  width: 30px;
}

<table id="column-1-table" class="table HS-Table">
  <tbody>
    <tr>
      <td class="" colspan="4">
        <div class="">Monday</div>
        <div class="HS-Going-Text">2022-06-20</div>
      </td>
      <td class="" colspan="3">
    </tr>
    <tr class="" style="overflow-x:hidden;">
      <td class="" colspan="4">
        <div class="pull-left Selection-Container">Argentina Liga Profesional de Futbol</div>
      </td>
    </tr>
    <tr data-selectionnumber="0" class="Event-bt9305886 RowVisible" id="Event-bt9305886">
      <td class="">
        <div class="">20:30</div>
      </td>
      <td class="">
        <div class=""><img class="HS-Silk-Image" src="https://dimg-pa.googleapis.com/lg/CgYwMDAwMDA.png?sig=AI8nk_dGt7qwEVp9ek4ARNvpY1gz&key=AIzaSyCUqbG5Kw_8jb3cy2ZBKvV2kAi8z0qmQO0&sk=r7Evjfpq7nk&w=96&h=96"></div>
      </td>
      <td class="selectionContainer">
        <div class="link link_animated">Godoy Cruz v Defensa y Justicia</div>
      </td>
      <td class="">
        <div class=""><img class="HS-Silk-Image" src="https://dimg-pa.googleapis.com/lg/CgYwMDAwMDA.png?sig=AI8nk_dGt7qwEVp9ek4ARNvpY1gz&key=AIzaSyCUqbG5Kw_8jb3cy2ZBKvV2kAi8z0qmQO0&sk=r7Evjfpq7nk&w=96&h=96"></div>
      </td>
    </tr>
  </tbody>
</table>

This works fine, however I need the translateX amount in the animation to be based on the width of the text, otherwise the text scrolls too far and shows whitespace.

Perhaps I need to use a bit of JS to get the width of the text or perhaps there is better way to get what im trying to achieve in CSS?

Solution

The amount that you need to move the text is a function of both the width of the text itself and the width of its container.

The amount that sticks out on the right hand side is (width of text - width of container).

We can use translate(100%) (or =100%) to move the text by its own width. And we can move the text to the right by the width of the container with left: 100%.

Note the text element and its container need to be position relative.

.selectionContainer {
  max-width: 150px;
  overflow: hidden;
  position: relative;
}

.link {
  white-space: nowrap;
  display: inline-flex;
  overflow: visible !important;
  position: relative;
}

.link_animated {
  animation: backAndForth 5s linear infinite;
}

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

.HS-Silk-Image {
  height: 30px;
  width: 30px;
}

<table id="column-1-table" class="table HS-Table">
  <tbody>
    <tr>
      <td class="" colspan="4">
        <div class="">Monday</div>
        <div class="HS-Going-Text">2022-06-20</div>
      </td>
      <td class="" colspan="3">
    </tr>
    <tr class="" style="overflow-x:hidden;">
      <td class="" colspan="4">
        <div class="pull-left Selection-Container">Argentina Liga Profesional de Futbol</div>
      </td>
    </tr>
    <tr data-selectionnumber="0" class="Event-bt9305886 RowVisible" id="Event-bt9305886">
      <td class="">
        <div class="">20:30</div>
      </td>
      <td class="">
        <div class=""><img class="HS-Silk-Image" src="https://dimg-pa.googleapis.com/lg/CgYwMDAwMDA.png?sig=AI8nk_dGt7qwEVp9ek4ARNvpY1gz&key=AIzaSyCUqbG5Kw_8jb3cy2ZBKvV2kAi8z0qmQO0&sk=r7Evjfpq7nk&w=96&h=96"></div>
      </td>
      <td class="selectionContainer">
        <div class="link link_animated">Godoy Cruz v Defensa y Justicia</div>
      </td>
      <td class="">
        <div class=""><img class="HS-Silk-Image" src="https://dimg-pa.googleapis.com/lg/CgYwMDAwMDA.png?sig=AI8nk_dGt7qwEVp9ek4ARNvpY1gz&key=AIzaSyCUqbG5Kw_8jb3cy2ZBKvV2kAi8z0qmQO0&sk=r7Evjfpq7nk&w=96&h=96"></div>
      </td>
    </tr>
  </tbody>
</table>

Answered By - A Haworth