0

Tengo un div que al hacerle click dispara el evento. Este evento debe tomar una animación de css (por keyframes). El problema es que al apretar el div, no me llama la regla del css.

let sq = document.getElementById('square');
sq.addEventListener('click', () => {
    console.log('click');
    setTimeout(up, 2000);

    function up() {
        sq.style.background = 'green';
    }
});
#square {
    background: red;
    width: 200px;
    height: 200px;
    float: left;
    transition: down;
    transition-duration: 3s;
}

@keyframes down {
    0% {
        background: red;
    }

    50% {
        background: yellow;
        margin-top: 400px;
     }

    100% {
        background: orange;
        margin-top: 0px;
    }
}

#square2, #square3, #square4 {
  margin-left: 5px;
}
<div class="cont">
        <div id="square"></div>
        <div id="square2"></div>
        <div id="square3"></div>
        <div id="square4"></div>
   </div>

1 respuesta 1

3

Para lograr lo que quieres modifiqué la función up para asignar la propiedad animation.

function up(){
    //Para usar animaciones mediante @keyframes debes
    //usar la propiedad 'animation' y no 'transition'
    sq.style.animation = "down 3s linear";
}

Es código CSS

#square {
    background: red;
    width: 200px;
    height: 200px;
    float: left;
}

@keyframes down {
    0% {
        background: red;
    }

    50% {
        background: yellow;
        margin-top: 400px;
     }

    100% {
        background: orange;
        margin-top: 0px;
    }
}

#square2, #square3, #square4 {
    margin-left: 5px;
}
1

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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