CSS JavaScript linear-gradientにtransitionが反映されない

Question

前提・実現したいこと

linear-gradientにtransitionが反映されません
下記コードだと一瞬で色が変わります
なぜ2秒かけて徐々に変わらないのでしょうか？

該当のソースコード

<style>
.gradient{
background-image: linear-gradient(150deg, transparent 0%, transparent 80%);
transition: 2s;
}
.gradient.on{
background-image: linear-gradient(150deg, red 0%, black 80%);
}
</style>

<div id="div" class="gradient" style="width:300px;height:300px"></div>

<input type="button" value="On" onclick="div.classList.add('on')">

Answer 1

background-image プロパティはアニメーション不可です。

https://drafts.csswg.org/css-backgrounds-3/#background-image

Animation type: discrete

この場合でしたら、opacity のアニメーションで代替できるかもしれません。