você pode e deve usar CSS para isto.
html, body {
position: relative;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
img {
position: absolute;
width: 128px;
height: 128px;
animation: move 5s linear forwards;
}
@keyframes move {
0% { top: 0px; left: 0px; transform: translate(0, 0); }
/*12.5% { top: 0px; left: 50%; transform: translate(-50%, 0); }*/
25% { top: 0px; left: 100%; transform: translate(-100%, 0) }
37.5% { top: 50%; left: 100%; transform: translate(-100%, -50%) }
/*50% { top: 50%; left: 50%; transform: translate(-50%, -50%); }*/
62.5% { top: 50%; left: 0px; transform: translate(0, -50%) }
75% { top: 100%; left: 0px; transform: translate(0, -100%) }
/*87.5% { top: 100%; left: 50%; transform: translate(-50%, -100%); }*/
100% { top: 100%; left: 100%; transform: translate(-100%, -100%) }
}
<img src="https://image.flaticon.com/icons/svg/159/159790.svg">
Detalhamento
para mover qual quer elemento CSS
, você pode manipular as propriedades top
, left
, transform(translateX)
e transform(translateY)
, lembrando que transform(translate)
é o mesmo que transform(translateX, translateY)
Para mover o elemento para o todo da tela, basta setar os seguintes valores:
top: 0px; left: 0px; transform: translate(0, 0);
então para mover para a direita, é necessario incrementar a % do left
e do transform(translateX)
, então para movemos até a parte central superior teríamos que modificar o CSS para:
top: 0px; left: 50%; transform: translate(-50%, 0);
O mesmo vale para deslocar para baixo, porém neste caso teria de incrementar a % do top
e transform(translateY)
, então para movemos até a parte central da lateral esquerda teríamos que modificar o CSS para:
top: 50%; left: 0px; transform: translate(0, -50%);
por fim, você pode incrementar os dois valores ao mesmo tempo, o ultimo exemplo moveria a imagem para o centro da tela:
top: 50%; left: 50%; transform: translate(-50%, -50%);
lembrando que para funcionar corretamente, o elemento deve ter a propriedade position: fixed
ou position: absolute
(no caso do absolute
, o elemento pai deve preencher toda a tela).