Eu tenho uma caixa que move pra um lado e pro outro usando o translateX ai pus uma pseudo classe pra emular um pulo com translateY quando o usuário passar o mouse sobre o container pai dessa caixa. O problema é que nao importa onde a caixa esteja no eixo x, quando pula ela sempre pula no 0px do eixo x. Se fizer o pulo usando a propriedade top dá certo, mas usando o translateY causa esse comportamento estranho.
#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>