How to animate with background-blend-mode like with overlays?

Question

EDIT

There seems to be no issue with the code. It's only CodePen that fails to show the animation correctly.

ORIGINAL QUESTION

A normal solution for my problem would be absolutely position an overlay container with semi-transparent background (color, linear-gradient, radial-gradient, conic-gradient or even url(image)). In case of the image you would likely combine it with opacity.

There's a newer well supported CSS property called background-blend-mode which (without animation) does the same, but in different ways.

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
}
div {
  --sqrt2: 1.4142135623730950488016887242097;
  --size: 300px;
  --x: 0%;
  --y: 0%;
  margin: auto;
  height: var(--size);
  width: var(--size);
  
  background: url(https://i.picsum.photos/id/695/800/600.jpg?hmac=TL1K4j89C4vOeDFLlzW0-BaQ2RQMMPW_4W3bW62nChM), radial-gradient(circle calc(var(--size) * var(--sqrt2)) at var(--x) var(--y), lightblue 0%, lightblue 20%, lightgreen 40%, lightcoral 60%, lightyellow 80%, lightyellow 100%);
  background-blend-mode: luminosity; /* normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity */
  background-size: cover;
}

<div></div>

Now the problem is when one tries to animate the radial-gradient (in this case). In a "normal" case, one simply animates the gradients coordinates and it looks good. In the case of background-blend-mode it failed me though.

I don't think I did anything wrong and this is perhaps just a bug in CSS, so asking for advice here might be in vain, but perhaps someone still has advice.

You may play around with my CodePen or just checkout the snippet here:

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
}
@property --x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
@property --y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
div {
  --sqrt2: 1.4142135623730950488016887242097;
  --size: 300px;
  --x: 0%;
  --y: 0%;
  margin: auto;
  height: var(--size);
  width: var(--size);
  
  background: url(https://i.picsum.photos/id/695/800/600.jpg?hmac=TL1K4j89C4vOeDFLlzW0-BaQ2RQMMPW_4W3bW62nChM), radial-gradient(circle calc(var(--size) * var(--sqrt2)) at var(--x) var(--y), lightblue 0%, lightblue 20%, lightgreen 40%, lightcoral 60%, lightyellow 80%, lightyellow 100%);
  background-blend-mode: luminosity; /* normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity */
  background-size: cover;
  -webkit-animation: roundabout 30s infinite ease-in-out both;
  -moz-animation: roundabout 30s infinite ease-in-out both;
  -o-animation: roundabout 30s infinite ease-in-out both;
  animation: roundabout 30s infinite ease-in-out both;
}

@-webkit-keyframes roundabout {
  100%, 0% { --x: 0%; --y: 0% }
  25% { --x: 100%; --y: 0% }
  50% { --x: 100%; --y: 100% }
  75% { --x: 0%; --y: 100% }
}
@-moz-keyframes roundabout {
  100%, 0% { --x: 0%; --y: 0% }
  25% { --x: 100%; --y: 0% }
  50% { --x: 100%; --y: 100% }
  75% { --x: 0%; --y: 100% }
}
@-o-keyframes roundabout {
  100%, 0% { --x: 0%; --y: 0% }
  25% { --x: 100%; --y: 0% }
  50% { --x: 100%; --y: 100% }
  75% { --x: 0%; --y: 100% }
}
@keyframes roundabout {
  100%, 0% { --x: 0%; --y: 0% }
  25% { --x: 100%; --y: 0% }
  50% { --x: 100%; --y: 100% }
  75% { --x: 0%; --y: 100% }
}

<div></div>

Answer 1

The non-prefixed CSS property is incorrect, it should be animation instead of animate. The prefixed properties are correct though.

animate: roundabout 30s infinite ease-in-out both;

animation: roundabout 30s infinite ease-in-out both;