I have come accross this problem and don’t understand the behaviour.
Here we have a simple rectangle that should animate in and out on the press of the toggle button.
When the button is clicked, the rectangle class name will be toggled between ‘animation-in’ and ‘animation-out’.
The keyframe object for ‘scale-easeInOutBounce’ and ‘scale-easeInOutBounce-out’ is identical, only the name reference is different between the two.
Everything works perfectly.
When the property ‘animation-name:’ within the css rule’.animation-out’ is changed from ‘scale-easeInOutBounce-out’ to ‘scale-easeInOutBounce’ the animation breaks.
The question here is, why does this occur? Is there a logic error in the code, or an incorrect implementation of animation?
Would love to understand this behaviour.
This behaviour was replicated using ‘Chrome’ on Windows 11
<!DOCTYPE html>
<html>
<head>
<title>Rectangle Animation</title>
<style>
#myRectangle {
width: 100px;
height: 150px;
background-color: green;
margin: 20px;
transform: scale(0);
}
.animation-out {
animation-duration: 4s;
animation-timing-function: ease; /*linear*/
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
animation-name: scale-easeInOutBounce;
animation-timeline: auto;
animation-range-start: normal;
animation-range-end: normal;
}
.animation-in {
animation-duration: 4s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: reverse;
animation-fill-mode: forwards;
animation-play-state: running;
animation-name: scale-easeInOutBounce;
animation-timeline: auto;
animation-range-start: normal;
animation-range-end: normal;
}
@keyframes scale-easeInOutBounce {
0% { transform: scale(1); }
2% { transform: scale(0.99); }
4% { transform: scale(1); }
10% { transform: scale(0.97); }
14% { transform: scale(0.99); }
22% { transform: scale(0.88); }
32% { transform: scale(0.99); }
42% { transform: scale(0.6); }
50% { transform: scale(0.5); }
58% { transform: scale(0.4); }
68% { transform: scale(0.01); }
78% { transform: scale(0.12); }
86% { transform: scale(0.01); }
90% { transform: scale(0.03); }
96% { transform: scale(0); }
98% { transform: scale(0.01); }
100% { transform: scale(0); }
}
@keyframes scale-easeInOutBounce-out {
0% { transform: scale(1); }
2% { transform: scale(0.99); }
4% { transform: scale(1); }
10% { transform: scale(0.97); }
14% { transform: scale(0.99); }
22% { transform: scale(0.88); }
32% { transform: scale(0.99); }
42% { transform: scale(0.6); }
50% { transform: scale(0.5); }
58% { transform: scale(0.4); }
68% { transform: scale(0.01); }
78% { transform: scale(0.12); }
86% { transform: scale(0.01); }
90% { transform: scale(0.03); }
96% { transform: scale(0); }
98% { transform: scale(0.01); }
100% { transform: scale(0); }
}
</style>
</head>
<body>
<div id="myRectangle"></div>
<button id="toggleButton">Toggle Animation</button>
<script>
document.getElementById('toggleButton').addEventListener('click', function() {
var rectangle = document.getElementById('myRectangle');
if (rectangle.classList.contains('animation-in')) {
rectangle.classList.remove('animation-in');
rectangle.classList.add('animation-out');
} else {
rectangle.classList.remove('animation-out');
rectangle.classList.add('animation-in');
}
});
</script>
</body>
</html>
2
Answers
I think your problem is the smoothness of the animation. I have made some CSS changes here, maybe your problem will be solved.
I can explain the cause of the behavior and what you can do to fix it.
Cause
The reason the outward animation appears to break is because it actually seems to start in the middle of it. More specifically—if you hit the button, the inward animation will play for 4 seconds, right? Then let’s say you wait 8 seconds before hitting the button a second time. For some reason, the outward animation will start 12 seconds into its animation. As proof, try setting the duration of the outward animation to 20 seconds and try hitting the buttons again. You’ll notice that the outward animation starts partway in.
Solution
If you wanted to keep using the separate animation name and keep your code the way it is, one solution is actually to add a delay before you add the classes. I edited the example and showed it below. You could for example use something like
setTimeout(() => rectangle.classList.add('animation-out'), 0), but a better function to use would berequestAnimationFrame()because it minimizes the delay.Why the behavior occurs in the first place? I do not know for sure. In general, you can expect some pretty weird behavior when it comes to swapping out keyframes in various circumstances (whether it involves pure CSS or the JavaScript WAAPI)—I can speak from personal experience on that. In this case, maybe swapping out the classes immediately makes it get confused and think that it’s just swapping out the keyframes for a singular animation instead of swapping out the animation entirely.