[Pause animation on reverse complete]

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:

 

See the Pen YjgYQG by bertyhell (@bertyhell) on CodePen