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>