CSS Sliding Animation for Background Position on click-CodePudding

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?

CodePudding user response：

The problem is in CSS file, try this:

#box {
  width: 200px;
  height: 100px;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, red 50%, black 50%);
}

.slide-in {
  animation: slide-in 0.5s forwards;
}

.slide-out {
  animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
  100% {
    background-position-x: -100%;
  }
}

@keyframes slide-out {
  0% {
    background-position-x: 0%;
    background-image: linear-gradient(to right, black 50%, red 50%);
  }
  100%{
    background-position-x: 100%;
    background-image: linear-gradient(to right, black 50%, red 50%);
  }
}