CSS Animation from right to left dynamically

Question

The problem I\'m facing is:

• I have a animated text which goes from right to left, this text change depending on the languague set, what is causing that the total w

Answer 1

You need a combination of positioning with right and a transform.

This is an usual idea for centering an element, adapted to your request:

.container {
  width: 300px;
  background-color: lime;
  margin: 10px;
  position: relative;
}

.item {
  display: inline-block;
  position: relative;
  right: -100%;
  transform: translateX(-100%);
  transition: right 1s, transform 1s;
}

.container:hover .item {
  right: 0%;
  transform: translateX(0%);
}

<div class="container">
  <div class="item">Item</div>  
</div>
<div class="container">
<div class="item">Item long</div>
</div><div class="container">
  <div class="item">Item longer longer</div>
</div>