背景画像をクリックでスライドさせるには

<div id="target"></div>
<style>
  :root {
    min-height: 100vh;
    display: flex;
    flex-flow: row nowrap;
    body {
      flex: 1;
      display: flex;
      flex-flow: row nowrap;
      :where(#target) {
        display: flex;
        flex: 1;
        background-image: url("画像のURL");
        background-repeat: no-repeat;
        background-position-x: 0;
        height: 100%;
        width: 100%;
      }
    }
    &:has(.clicked) {
      pointer-events:none;
    }
  }
</style>
<script type="module">
  target.addEventListener("click", async (e) => {
    const target = e.currentTarget;
    target.classList.add("clicked");
    const animate = target.animate(
      [
        {
          backgroundPositionX: CSS.px("0"),
        },
        {
          backgroundPositionX: CSS.px("200"),
        },
        {
          backgroundPositionX: CSS.px("0"),
        },
      ],
      {
        duration: 2000,
        iterations: 1,
      },
    );
    animate.play();
    await animate.finished;
    target.classList.remove("clicked");
  });
</script>