Tengo el siguiente código que anima la propiedad background-position para que luego se "deslice" a un color diferente. Mi problema actualmente es cómo revertirlo. La mayoría de los ejemplos que he visto están alrededor de hover ; este, sin embargo, es de un contexto de un evento de clic. ¿Alguna idea de cómo puedo revertir la animación al volver a activarla?
El problema está en el archivo CSS, intente esto:
#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%); } }