Using currentColor in CSS Animation Keyframes

Example of using currentColor to allow for easy color changes in animation keyframes. This allows reuse of the animation CSS without having to make new versions just because of color changes. Does not work in Chrome.

HTML

<div></div>

SCSS

:root {
  --color: green;
}

div {
  --color: red;
  
  width: 100px;
  height: 100px;
  animation: opacity  2s infinite ease-in-out;
}

@keyframes opacity {
  to {
    border: none;
  }
  50% {
    border: 1px solid var(--color);
  }
  from {
    border: 3px solid var(--color);
  }
}