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
  • Gracias amigo!!
    – Richi
    Commented el 30 mar. 2019 a las 19:20

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.