How to give a translateY with Banse in the current value of translateX?

Question

I have a box that moves to one side and to the other using translateX ai I put a pseudo class to emulate a jump with translateY when the user hovers over the parent container of this box. The problem is that no matter where the box is on the x-axis, when it jumps it always jumps on the x-axis 0px. If you jump using the top property it works, but using translateY causes this strange behavior.

#mundo{
    width: 600px;
    height: 400px;
    position: relative;
    margin: 0px auto;
    background: cornsilk;
}

#caixa{
    position: absolute;
    width: 50px;
    height: 50px;
    outline: 1px solid;
    left:0px;
    top:100px;
   animation: mover 3s alternate infinite;
   
}


#mundo:hover #caixa{
   animation:mover 3s alternate infinite, pular 1s;
   
}


@keyframes mover{
   0%{transform:translateX(-10px)}
   100%{transform:translateX(500px)}
}

@keyframes pular{
   0%{transform:translateY(0px)}
   50%{transform:translateY(-50px)}
   100%{transform:translateY(0px)}
}


 /*Esa versao do pulo funciona - THS version works */
/*
@keyframes pular{
   0%{top:100px}
   50%{top:50px}
   100%{top:100px}
}
*/

<div id="mundo">
        <div id="caixa"></div>
    </div>

Answer 1

With translateY you won’t get, pq vc will not be able to pick up the value of X at runtime, or maybe even get with JS, but the job is not worth it, so even with the worse performance, I would go from top or margin top even... Another problem is that one of your animation is "cutting" the other. You would have to declare something like below, and not just X or just Y individually, they have to be declared together!

@keyframes pular{
   0%{transform:translate(-10px, 0px)}
   /* só que AUTO não existe, e tb não da para garantir que o usuário vai interagir nos 50% */
   50%{transform:translateY(AUTO, -50px)} 
   100%{transform:translateY(500px, 0px)}
}

Another suggestion, if your concern is even rendering performance, you can simply leave others div for and apply to it the translateY.

#mundo{
    width: 600px;
    height: 400px;
    position: relative;
    margin: 0px auto;
    background: cornsilk;
}

#caixa{
    position: absolute;
    width: 50px;
    height: 50px;
    outline: 1px solid;
    left:0px;
    top:100px;
    animation: mover 3s alternate infinite; 
}

#mundo:hover #caixa{
   animation:mover 3s alternate infinite;
}

#mundo:hover #debug{
   animation: pular 1s;
}


@keyframes mover{
   0%{transform:translateX(-10px)}
   100%{transform:translateX(500px)}
}

@keyframes pular{
   0%{transform:translateY(0px)}
   50%{transform:translateY(-50px)}
   100%{transform:translateY(0px)}
}

<div id="mundo">
    <div id="debug">
      <div id="caixa"></div>
    </div>
</div>