.allElements {
  transform:translate(0%) scale(1);
  transition:0.5s transform ease;
}
That way, we can give the element an active class, like this, which tells it to slide right and grow when it's active:
.active {
  transform:translate(100%) scale(1.5);
}
When applied to the elements, it overwrites the first transform. The elements would slide 100% of their width, from their natural left, to the right.

The challenge I saw with some of the SVGs recently, was that the SVGs were using transform to declare their natural position. like this:
.exampleElement1 {
  transform:translate(30px);
}
.exampleElement2 {
  transform:translate(80px);
}
Now, we cannot use our animation transform. Once we apply transform on these elements, it will overwrite the transform that was used to position them. They would lose their natural position, and instead of sliding from their 30 or 80px, would slide from 0px.

It is possible to write unique animations for each of the elements, like:
.exampleElement1Active {
  transform:translate(30px) translate(100%) scale(1.5);
}
.exampleElement2Active {
  transform:translate(80px) translate(100%) scale(1.5);
}
However, that's a lot of extra code. We've worked with SVGs for many years now, and we've always been able to get them without transforms used in their positioning.