I've been working on creating a CSS keyframes animation for a navigation bar, and I'm encountering some issues. The animation involves a red line moving when a user clicks on a nav bar element. By default, the first element is active (red line under it), and when clicked, JavaScript combines properties of the animation element and the clicked element into new keyframes.
The animation works smoothly from element 1 to 2 and 1 to 3. However, there's a problem when attempting to play the animation from element 2 to 3 after going from 1 to 2. Despite checking the animationend event, I couldn't find a solution by removing or reattaching the animation class or changing the animation-play-state property.
Researching various methods didn't yield a fix either. Avoiding brute force creation of multiple keyframes rules, which would be tedious and unscalable with more elements in the nav bar, is my goal. I'd like to keep the code flexible and applicable across different scenarios.
If you have any suggestions or insights on how to resolve this animation issue, feel free to share. Thank you!
~ Code Snippet ~
// Your JavaScript code here...// Your CSS code here...// HTML markup example...