Get width of text to use in CSS scroll animation-CodePudding

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" >
  <tbody>
    <tr>
      <td  colspan="4">
        <div >Monday</div>
        <div >2022-06-20</div>
      </td>
      <td  colspan="3">
    </tr>
    <tr  style="overflow-x:hidden;">
      <td  colspan="4">
        <div >Argentina Liga Profesional de Futbol</div>
      </td>
    </tr>
    <tr data-selectionnumber="0"  id="Event-bt9305886">
      <td >
        <div >20:30</div>
      </td>
      <td >
        <div ><img  src="https://dimg-pa.googleapis.com/lg/CgYwMDAwMDA.png?sig=AI8nk_dGt7qwEVp9ek4ARNvpY1gz&key=AIzaSyCUqbG5Kw_8jb3cy2ZBKvV2kAi8z0qmQO0&sk=r7Evjfpq7nk&w=96&h=96"></div>
      </td>
      <td >
        <div >Godoy Cruz v Defensa y Justicia</div>
      </td>
      <td >
        <div ><img  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?

CodePudding user response：

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" >
  <tbody>
    <tr>
      <td  colspan="4">
        <div >Monday</div>
        <div >2022-06-20</div>
      </td>
      <td  colspan="3">
    </tr>
    <tr  style="overflow-x:hidden;">
      <td  colspan="4">
        <div >Argentina Liga Profesional de Futbol</div>
      </td>
    </tr>
    <tr data-selectionnumber="0"  id="Event-bt9305886">
      <td >
        <div >20:30</div>
      </td>
      <td >
        <div ><img  src="https://dimg-pa.googleapis.com/lg/CgYwMDAwMDA.png?sig=AI8nk_dGt7qwEVp9ek4ARNvpY1gz&key=AIzaSyCUqbG5Kw_8jb3cy2ZBKvV2kAi8z0qmQO0&sk=r7Evjfpq7nk&w=96&h=96"></div>
      </td>
      <td >
        <div >Godoy Cruz v Defensa y Justicia</div>
      </td>
      <td >
        <div ><img  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>

CodePudding user response：

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

Try this, although there is still a little offset to the right