Changing the direction of a CSS animation through javascript

Take the following example :

const keybind = {
  "ArrowDown": function(event) {
    document.getAnimations().forEach(animation => animation.currentTime += 1000);
    document.getAnimations().forEach(animation => animation.currentTime = Math.min(animation.currentTime, animation.effect.getTiming().duration));
  },
  "ArrowUp": function(event) {
    document.getAnimations().forEach(animation => animation.currentTime -= 1000);
    document.getAnimations().forEach(animation => animation.currentTime = Math.max(animation.currentTime, 0));
  }
}
document.body.addEventListener("keydown", (event) => keybind[event.key] && keybind[event.key](event));

@keyframes slide {
  0% {
    object-position: top;
  }
  100% {
    object-position: bottom;
  }
}

body {
  width: 100%;
  height: 100%;
  overflow:hidden;
}

img {
  width: 100%;
  height: 256px;
  object-fit: cover;
  animation-name: "slide";
  animation-duration: 5s;
  animation-timing-function:linear;
  animation-fill-mode:both;
  animation-play-state: paused;
}

<img src="https://i.sstatic.net/eAebw9Zv.jpg" alt="example image">

You should be able to scroll the image by using the arrow up / arrow down keys (it does require keyboard focus to work ie. by clicking on the image first).

it does this by setting the currentTime property of the animation. The interesting part is what happens with arrowUp. Here we are subtracting from the current time, giving the illusion of going backwards. however if we were to change animation-direction it would reverse the whole animation and the arrowUp code would add instead of subtracting to achieve the same effect.

Basically the two approaches are either adding and subtracting from currentTime, or else somehow changing the direction of the animation. I thought the second option was rather elegant as we can re-use some code

Calling animation.reverse() function doesn’t seem to affect the animation direction, as far as I can tell what it does is something like

animation.playbackRate *= -1;
animation.currentTime = animation.effect.getTiming().duration - animation.currentTime;
animation.play();

We still go back and forth by subtracting and adding to currentTime

Javascript doesn’t seem to allow us to change the CSS animation-direction without messing around with animation.effect.target.style.animationDirection = "reverse" and things, which I kinda hate. I feel that I’m just missing a property somewhere that determines the direction of the animation that can just be checked and set.

The only other thing I can think of is using a property on the image animation.effect.target.dataset.playback = "reverse" and adding a CSS rule to the stylesheet, which is still a little ham-fisted IMO

Here is the same example using that :

const setDirection = function(value) {
  if (document.getAnimations().every(animation => animation.effect.target.dataset.playback != value)) {
    for (const animation of document.getAnimations()) {
      animation.effect.target.dataset.playback = value;
      animation.currentTime = animation.effect.getComputedTiming().duration - animation.currentTime;
    }
  }
}

const step = function() {
  document.getAnimations().forEach(animation => animation.currentTime += 1000);
  document.getAnimations().forEach(animation => animation.currentTime = Math.min(animation.currentTime, animation.effect.getTiming().duration));
} 

const keybind = {
  "ArrowDown": function(event) {
    setDirection("normal");
    step();    
  },
  "ArrowUp": function(event) {
    setDirection("reverse");
    step();    
  }
}
document.body.addEventListener("keydown", (event) => keybind[event.key] && keybind[event.key](event));

@keyframes slide {
  0% {
    object-position: top;
  }
  100% {
    object-position: bottom;
  }
}

body {
  width: 100%;
  height: 100%;
  overflow:hidden;
}

img {
  width: 100%;
  height: 256px;
  object-fit: cover;
  animation-name: "slide";
  animation-duration: 5s;
  animation-timing-function:linear;
  animation-fill-mode:both;
  animation-play-state: paused;
}
img[data-playback = "reverse"] {
  animation-direction:reverse;
}

<img src="https://i.sstatic.net/eAebw9Zv.jpg" alt="example image" data-playback="normal">

As usual, I mostly answered my own question while writing it but I’ll post it anyway in case someone in the future is in the same situation. I would like to know if there is a simpler way to change the animation-direction style via javascript though, and if not why is the property not accessible ?