On gists

@property like fake replacement for animation ;)

CSS trick

index.css Raw #

/*
https://yuanchuan.dev/time-uniform-for-css-animation
*/


@property --t {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}


@keyframes animate-time {
  from { --t: 0 }
  to   { --t: 31536000000 }
}

/* Put animation to :root so we can use --t everywhere */
:root {
  animation: animate-time 31536000000ms linear infinite;
}

div {
  background: red;
  width: 100px;
  height: 100px;
  margin: 5rem;
  
}

.second {
   background: hsl(
    calc(var(--t) * .072), 60%, 60%
  );
}

div.first {
  transform: rotate(
    calc(var(--t) / 1000 / 10 * 1turn)
  );
}