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%);
}

  
Item
  


Item long

  
Item longer longer