1

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>

0

1 Resposta 1

3

Com translateY vc não vai conseguir, pq vc não vai conseguir pegar o valor de X em tempo de execução, ou talvez até consiga com JS, mas o trampo de fazer não vale a pena, então mesmo com com a performance pior, eu iria de top ou margin top mesmo... Outro problema é que uma animação sua está "cortando" a outra. Vc teria que declarar algo como abaixo, e não apenas X ou apenas Y individualmente, eles tem que ser declarado juntos!

@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)}
}

Outra sugestão, se a sua preocupação é mesmo performance de renderização, vc pode simplesmente deixar outras div por for e aplicar nela o translateY.

inserir a descrição da imagem aqui

#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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .