@property --color1 {
  syntax: '<color>';
  inherits: false;
  initial-value: indianred;
}

@property --color2 {
  syntax: '<color>';
  inherits: false;
  initial-value: cornflowerblue;
}

body {
  width: 100vw;
  height: 100vh;
  --color1: indianred;
  --color2: cornflowerblue;
  transition:
    --color1 2s,
    --color2 2s;
  background: linear-gradient(var(--color1) 50%, var(--color2) 50%);
}

div#sentence {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11vw;
  padding: 15vw;
  text-align: center;
  font-weight: 400;
}

.fade {
  animation: 1s fade;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}