CSS's animation triggered by click events doesn't work properly

Hi everyone!

I want to practice @keystrokes animations and can’t get a simple example to work. Here is my code:

https://jsfiddle.net/ndh8urmq/

I want to be able to move the box with the buttons by applying a proper class to my box on click. The problem is, I can’t get the box to animate properly more than once, each click after the first one only moves the box immediately to its final position without animation.
The animation runs correctly if set on a loop (by adding alternate and infinite), but I want to be able to manually move the box when I want to.

So I thought this was really weird too. I found this stack overflow answer https://stackoverflow.com/a/39791108 and it looks like it is a bug. You can make it work by having a different @keyframes animation, even if it is just the same code.

.move-right {
  animation: move 0.3s ease forwards
}

.move-left {
  animation: move-backwards 0.3s reverse ease forwards
}

@keyframes move {
  0% {
    transform: translateX(0px)
  }
  100% {
    transform: translateX(200px)
  }
}

@keyframes move-backwards {
  0% {
    transform: translateX(0px)
  }
  100% {
    transform: translateX(200px)
  }
}
2 Likes

Wow, that’s interesting. I tried different ways to do it besides creating a new animation and even tested on multiple browsers. Quite weird this bug is still present after a few years.

Thanks for the help! :slight_smile: