Estoy intentando hacer que al poner el cursor del raton sobre una imagen este se mueva un poco hacia abajo, y que al quitar el cursor del elemento vuelva a su posicion original. Y lo he conseguido, el problema es que quiero poner una animacion entre los movimientos y no se como hacer que el elemento en cuestion tenga una animacion a su estado original al quitar el hover. ¿Algún consejo?
.press {
margin-top: 15px;
position: relative;
}
.press:hover {
animation: mymove 0.5s;
animation-fill-mode: forwards;
}
@keyframes mymove {
from {
top: 0px;
}
to {
top: 10px;
}
}
<a href="#">
<img class="press" src="https://logodownload.org/wp-content/uploads/2017/11/discord-logo-0.png" width="60%" height="auto">
</a>