CSS Sliding Animation for Background Position on click

I have the following code that animates the background-position property so it “slides” to a different color afterwards. My problem currently is how to reverse it. Most of the examples I’ve seen is around hover; this one though is from a context of a click event. Any ideas how I can reverse the animation on re-toggling it?