On gists

Css animated border with css @property instead of css variable

CSS trick

example.css Raw #

/*
@source: https://www.youtube.com/watch?v=ezP4kbOvs_E
@demo: https://jsbin.com/rixenodiga/3/edit?html,css,output
*/

body {
  background: #000;
}


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

.card {
  
  /* nefunguje pro animaci, nahradi se  @property */
  /*
    --angle: 0deg
  */
  
  width: 300px;
  height: 300px;
  background: #000;
  border-radius: 10px;
  margin: 3rem;
  position: relative;
}

.card::after,
.card::before 
{
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  
  /* vice barev */
   background-image: conic-gradient(from var(--angle), red, blue, pink, orange, lime); 

  /* jedna a do ztracena */
  /*background-image: conic-gradient(from var(--angle), transparent 80%, red); */ /* velikost definuje rozsah*/
  
  padding: 3px;
  top: 50%;
  left: 50%;
  translate: -50% -50%;

  animation: 3s spin linear infinite;

}

.card::before {
  filter: blur(1.5rem);
  opacity: 0.7;
}


@keyframes spin {
  from {
    --angle: 0deg;
  }
  
  to {
    --angle: 360deg;
  }
}

property-info.txt Raw #

CSS proměnné (Custom Properties) samotné nemůžou být přímo animované, protože CSS engine původně nevěděl, jaký typ hodnoty proměnná obsahuje. Proto byla představena @property, která přesně definuje typ hodnoty a umožňuje tak animaci.
Klíčové důvody proč původní CSS proměnné nejdou animovat:

Typová bezpečnost - běžná CSS proměnná nemá definovaný typ, takže engine neví jak interpolovat hodnoty mezi stavy
CSS proměnné jsou považovány za textové řetězce, ne za konkrétní CSS hodnoty

@property řeší tyto problémy tím, že:

Definuje přesný typ hodnoty (syntax)
Určuje výchozí hodnotu (initial-value)
Specifikuje zda se hodnota dědí (inherits)

Více informací najdete zde:

Specifikace Houdini API: https://drafts.css-houdini.org/css-properties-values-api/
MDN dokumentace: https://developer.mozilla.org/en-US/docs/Web/CSS/@property

Podporu v prohlížečích můžete zkontrolovat na:
https://caniuse.com/css-property-rule
Pro animování úhlů je tedy nutné použít @property --angle jak máte v kódu, protože tím explicitně říkáte, že hodnota je typu <angle> a může být animována mezi dvěma úhly.
Existují alternativní přístupy pro starší prohlížeče, například:

Použití transform: rotate() místo CSS proměnné
Animování pomocí JavaScript
Využití preprocessorů jako SASS