Best way to create animation form left to right with css - html

Question

I wan to make animation from left to right (animation start in invisible area like left: -100px) and end in invisible area too (right: -100px) I am using this code which works but not correctly on different sizes of screens becuase is in %. And i need to remake it but i dont know how.
.ip_first_block {
width: 100%;
height: 100%;
}
section {
position: relative;
overflow: hidden;
}
.ip_welcome_text {
width: 100%;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.astronaut1 {
position: relative;
animation: lefttoright 10s;
animation-fill-mode: forwards;
}
#keyframes lefttoright {
from {
transform: translateX(-1500%);
}
to {
transform: translateX(2200%);
}
}
<section style="height:100%;">
<div class="ip_first_block" id="ifb">
<div class="ip_welcome_text">
<div class="astronaut1">
<img src="images/astronaut.svg" height="70px" ; width="70px;" />
</div>
</div>
</div>
</section>

Answer 1

It's easier if you animate the position, e.g. left property:
body {margin: 0}
.astronaut1 {
overflow: hidden;
}
img {
position: relative;
left: -70px; /* starting point; needs to be at least the img width to hide it */
animation: lefttoright 10s forwards;
}
#keyframes lefttoright {
to {left: 100%} /* cover the entire parent width */
}
<div class="astronaut1">
<img src="http://placehold.it/70x70" alt="" height="70" width="70">
</div>