Estoy diseñando una pagina web y necesito hacer una animación para cuando pasas el mouse por encima de una imagen y que esta gire, logre hacer que gire pero la animación se detiene nada mas muevo el mouse fuera de la imagen tengo esto:
.profilepic {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
height: 20%;
}
.profilepic:hover {
animation: spin 1s alternate;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<img class="profilepic" src="https://picsum.photos/200" alt="Profile-Picture">