JSFiddle - React, Tailwind, and code Playground

HTML

<a href="">
  <h1>Animated background in Firefox??</h1>
</a>

CSS

:root {
    --bgX: 0px;
    --bgY: 0px;
}

a {
  display: block;
  width: 170px; height: 170px;
  border: 2px solid transparent;
  
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/glitch-crab.png") no-repeat;
  background-position: var(--bgX) var(--bgY);
  
  animation: move-y 1s steps(4) infinite, 
             move-x 0.25s steps(6) infinite;
}

/*Here, CSS variables work:*/
a:hover { --bgY: -20px; }

/*Here, CSS variables don't work:*/
@keyframes move-y {
  from {
    --bgY: 0px;
    border-top-color: red;
  }
  to {
    --bgY: -670px;
    border-top-color: yellow;
  }
}
@keyframes move-x {
  from {
    --bgX: 0px;
    border-right-color: #555;
  }
  to {
    --bgX: -1020px;
    border-right-color: #999;
  }
}