<div class="box"></div>
@property --a{
  syntax: '<angle>';
  inherits: false;
  initial-value: 90deg;
}
@property --l{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
@property --c{
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.box {
  /*  needed for firefox to have a valid output */
  --a:20deg;
  --l:10%;
  --c:red;
  /**/
  cursor:pointer;
  width:500px;
  height:400px;
  margin:15px;
  display:inline-block;
  transition:--a 0.5s 0.1s,--l 0.5s,--c 0.2s;
  background:linear-gradient(var(--a), var(--c) var(--l),blue,var(--c) calc(100% - var(--l)));
  animation:a 1s linear infinite alternate;
}

@keyframes a{
  from {
  --a:20deg;
  --l:10%;
  --c:red;
  }
  50% {
    --c:pink;
  }
  to {
  --a:300deg;
  --l:40%;
  --c:green;
  }
}

body {
  text-align:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.