@property --color-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --color-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: rebeccapurple;
}

div {
  height: calc(100vh - 1rem);
  width: 100%;
  background: linear-gradient(var(--color-1), var(--color-2));
  animation: anim1 2s ease infinite alternate, anim2 2s ease 1s infinite alternate;
}

@keyframes anim1 {
  to {
    --color-1: rebeccapurple;
  }
}

@keyframes anim2 {
  to {
    --color-2: wheat;
  }
}