2

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

1 respuesta 1

2

Usa transition en lugar de animation:

.profilepic {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    height: 20%;
    transition: transform 1s;
}

.profilepic:hover {
    transform: rotate(360deg);
}
<img class="profilepic" src="https://picsum.photos/200" alt="Profile-Picture">

Usando tu código es posible lograrlo en combinación con javascript, detectando el final de la animación mediante un evento:

const elements = document.getElementsByClassName("profilepic");

for (let i = 0; i < elements.length; i++) {
  elements[i].addEventListener('animationend', function(e) {
    elements[i].classList.remove('animated');
  });

 elements[i].addEventListener('mouseover', function(e) {
   elements[i].classList.add('animated')
 })
}
.profilepic {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    height: 20%;
}

.animated {
    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">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.