I'm trying to get an animation to pause at the end when i play it and at the start when i play it in reverse.
The codepen works sometimes but most of the time, the element becomes visible after the play reverse has completed.
The expected behavior is:
page loads: button is visible, red div is not
user clicks on button: red div fades in while animating to the right
The red div stays visible on the right
user clicks on button again: red div fades out while moving to the left
the red div stays hidden on the left
The current behavior is:
page loads: button is visible, red div is not
user clicks on button: red div fades in while animating to the right
The red div stays visible on the right
user clicks on button again: red div fades out while moving to the left
the red div pops back up on the right
Note: I would prefer to not set the opacity 0 and x: -100 through css because of reasons.
Here is a video of the behavior working and not working:
