CSS linear-gradientを使ったアニメーションの挙動がわかりません

Question

linear-gradientを使ったアニメーションの挙動がわかりません
該当のソースコード1つ目を実行すると、色は切り替わりはするのですが、
アニメーションのような徐々に変化していくという形になりません。

2つ目のコードだと色が徐々に変化していくのがわかります
何か足りないことがあるのでしょうか？

<style>
body,html{
height:100%;
}
.test{
animation:1s ease infinite alternate test;
}
@keyframes test{
0%{background: linear-gradient(45deg, red 0%, red 50%, blue 50%, blue 100%)}
100%{background: linear-gradient(-45deg, yellow 0%, yellow 50%, aqua 50%, aqua 100%)}
}
</style>
<div style="width:100%;height:100%" class="test"></div>

<style>
body,html{
height:100%;
}
.test{
animation:.5s ease infinite alternate test;
}
@keyframes test{
0%{background-color:red}
100%{background-color:blue}
}
</style>
<div style="width:100%;height:100%" class="test"></div>

Answer 1

参考にしたページ
https://stackoverflow.com/questions/23441060/animating-linear-gradient-using-css
によると1つ目のコードでは足りないとかではなくそもそも駄目だそうです。
なので別の方法でやる必要があり、その方法も上のページに書いてありました。