CSS Houdini to standard css - border animation

[antarey]

I found an example
It works great on codepen

Code: Select all

<div class="nsr-border-anim"></div>

Code: Select all

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
body {
  background: #000;
  display: grid;
  place-items: center;
  min-height: 100vh;
}
.moving-border {
  width: 200px;
  height: 300px;
  position: relative;
  background: #111;
  padding: 4px;
}
.moving-border::before,
.moving-border::after {
  content: "";
  position: absolute;
  inset: -0.2rem;
  z-index: -1;
  background: linear-gradient(var(--angle), 
    #032146,  #C3F2FF, #b00);
  animation: rotate 10s linear infinite;
}
.moving-border::after {
  filter: blur(10px);
}
@keyframes rotate {
  0%     { --angle: 0deg; }
  100%   { --angle: 360deg;
  }
}

BUT! - @property - This is an experimental technology - The @property CSS at-rule is part of the CSS Houdini.
This technology does not work in Joomla 4, not all browsers support it.
Is it possible to translate this experimental technology into standard css?

[SharkyKZ]

Codepen link? To my understanding, this needs to be accompanied with JS code to work.

[antarey]

Codepen link? To my understanding, this needs to be accompanied with JS code to work.

https://codepen.io/Mahe76/pen/PoyWvXX
JS code not use

[antarey]

Sorry, I made an error in the html

Code: Select all

<div class="moving-border"></div>

[Pavel-ww]

Sorry, I made an error in the html

Code: Select all

<div class="moving-border"></div>

Hi. Replace part of code
from...

Code: Select all

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

...to

Code: Select all

:root {
--angle: 0deg;
}