Moim zdaniem, dla animacji "przesuwania" elementów, lepiej się sprawdza transform: translate
Difference between Translate & Position Relative
The transform property will use hardware acceleration where possible so using translate() over position will see performance benefits if any animations or transitions are also being used on the element.
przykład
<button>
<span>buy now</span>
<span>great deal!</span>
</button>
* {
margin: 0;
padding: 0;
}
button {
position: absolute;
bottom: 15vh;
right: 15vw;
border: 2px solid black;
width: 360px;
height: 100px;
background-color: #fff;
font-size: 40px;
text-transform: uppercase;
font-family: roboto condensed;
overflow: hidden;
cursor: pointer;
}
button span {
position: relative;
top: 0;
/* left: 0; */
display: block;
white-space: nowrap;
line-height: 100px;
transition: transform 550ms 100ms cubic-bezier(0.5,-0.8,0.25,1.4);
}
span:nth-child(2) {
top: -100%;
transform: translatex(150%);
}
button:hover span:nth-child(1) {
transform: translatex(-150%);
}
button:hover span:nth-child(2) {
transform: translatex(0);
}