Let's talk about an element that already has an animation set to trigger at a specific time:
.element {
width: 100%;
height: 87.5%;
background: #DDD;
position: absolute;
top: 12.5%;
left: 0%;
-webkit-animation: load 0.5s ease-out 5s backwards;
animation: load 0.5s ease-out 5s backwards;
}
However, I want to initiate a new animation on the same element after the initial animation finishes. My idea was to create a new class and add it to the element using JavaScript:
.new-animation {
-webkit-animation: unload 0.5s ease-out 0.5s backwards !important;
animation: unload 0.5s ease-out 0.5s backwards !important;
}
document.querySelector(".element").classList.add('new-animation');
Unfortunately, this approach doesn't seem to work as expected. Even though the class is added, the animation does not play. Can anyone shed light on why this might be happening and provide a solution?