Gradient animation

by vovkasolovev

HTML

<div class="box"></div>

CSS

@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: #1177ff;
}

.box {
  /*  needed for firefox to have a valid output */
  --a:80deg;
  --l:10%;
  --c:#1177ff;
  /**/
  cursor:pointer;
  width:500px;
  height:400px;
  margin:15px;
  display:inline-block;
  transition:--a 0.5s 0.1s,--l 0.5s,--c 0.8s;
  background:linear-gradient(var(--a), var(--c) var(--l),blue,var(--c) calc(100% - var(--l)));
}
.box:hover {
  --a:360deg;
  --l:30%;
  --c:#001177;
}

body {
  text-align:center;
}