CSS Animation sudden move - html

Question

I have the following JS fiddle: https://jsfiddle.net/ur9bpgbn/163/
.arrow {
position: absolute;
font-size: 16px;
max-width: 350px;
background: #FFF;
height: 40px;
line-height: 40px;
margin-bottom: 20px;
text-align: center;
color: #000;
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
z-index: 999;
}
.arrow.active {
visibility: visible;
opacity: 1;
}
.arrow.active.animate-left-to-right {
animation-name: move-left-to-right;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
.arrow.active.animate-right-to-left {
animation-name: move-right-to-left;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
#keyframes move-left-to-right {
0% {
transform: translateX (5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
#keyframes move-right-to-left {
0% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
/*right arrow*/
.arrow-right {
border-radius: 0px 0px 0 0px;
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-right:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #FFF;
opacity: 0.7;
}
.arrow-right:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #FFF;
opacity: 1;
}
/*left arrow*/
.arrow-left {
border-radius: 0 0px 0px 0;
background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-left:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #FFF;
opacity: 0.7;
}
.arrow-left:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #FFF;
opacity: 1;
}
<div id="app">
<a href="https://sporedev.ro" target="_blank">
<div href="#" class="arrow arrow-right animate-right-to-left">This is a text</div>
</a>
<div href="#" class="arrow arrow-left animate-left-to-right" style="margin-top:30%; margin-left:30%;"><span class="room-desc">This is a text</span></div>
</div>
The arrow that moves to the right side works perfectly.
The arrow to the left side has some kind of a glitch, it has a sudden move when it reaches the end of the transition.
I tried applying changes to the CSS in everything related to the left arrow with no effect. The script has some JS that adds the "active" class and I tried removing it to simplify the script and make sure it's not a JS related problem with no effect.
Tried reading up transitions but I didn't found any solutions. I'm sure that I miss something that is CSS related.
How can I make the arrow that points to the left side move smoothly?

Answer 1

Update this part transform: translateX (5%); to transform: translateX (0%);
#keyframes move-left-to-right {
0% {
transform: translateX (0%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(0%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
https://jsfiddle.net/ur9bpgbn/168/
I believe the little jump is the 0-5% which it is not animating so it just jumps