JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

:root {
    --bgX: 0px;
    --bgY: 0px;
    --bgY2: 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) calc(var(--bgY) + var(--bgY2));
  
  animation: move-y 2s steps(4) infinite, 
             move-x .5s steps(6) infinite;
}

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

/* Here, CSS variables don't work (only works in Chrome): */
@keyframes move-y {
  0% {
    --bgY: 0px;
    border-top-color: red;
  }
  25% {
    --bgY: -167px;
    border-top-color: yellow;
  }
  50% {
    --bgY: -334px;
    border-top-color: lime;
  }
  75% {
    --bgY: -502px;
    border-top-color: dodgerblue;
  }
}
@keyframes move-x {
  0% {
    --bgX: 0px;
    border-right-color: #222;
  }
  17% {
    --bgX: -170px;
    border-right-color: #444;
  }
  33% {
    --bgX: -340px;
    border-right-color: #666;
  }
  50% {
    --bgX: -510px;
    border-right-color: #888;
  }
  67% {
    --bgX: -680px;
    border-right-color: #aaa;
  }
  83% {
    --bgX: -850px;
    border-right-color: #ccc;
  }
}