html - Animate image to move to the right to a specific position in Angular

Question

I'm doing a web application in Angular 11. We have an image that is a table with 4 columns and a simple icon below it. We would like to move the icon to the right based on a value (number) that I receives from the backend (HTTP call).

Image (690x450):

H1	H2	H3	H4
1	2	3	4

Answer 1

You can use the CSS variables.

#slide {
  position: absolute;
  width: 100px;
  height: 100px;
  -webkit-animation: slide 0.5s forwards;
  -webkit-animation-delay: 0.5s;
  animation: slide 0.5s forwards;
  animation-delay: 2s;
}

@-webkit-keyframes slide {
  100% { var(--left); }
}

@keyframes slide {
  100% { var(--left); }
}

And pass it via the HTML

 <div class="row justify-content-center">
    <div class="col-auto">
      <div class="band-container">
        <table class="table table-borderless">
          <tbody>
          <tr>
            <td class="p-0">
              <img src="assets/imgs/table.png" width="590" height="350"/>
            </td>
          </tr>
          <tr *ngIf="(number$ | async) as number">
            <td class="p-0">
              <img id="slide" style="--left: distance;" src="assets/icons/hand.png" />
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

Here's an example https://jsfiddle.net/204aubw6/

It doesn't have full support for all browsers, but since you are doing Angular 11, IE won't matter anyway https://caniuse.com/css-variables.