如何控制多次线性梯度的转换？

Question

让我们说：

.el {
  background:linear-gradient(to bottom, black, black), linear-gradient(to bottom, red, red), linear-gradient(to bottom, blue, blue), linear-gradient(to bottom, green, green);
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:100% 0;
}

.el:hoover{
 background-size:100% 100%;
}

如何控制每个线性渐变的转换？让我们说.... 500毫秒800毫秒1s 1.5s？

没有其他div / ::before / ::after是否可能？

由于