[解決済み】グラデーション背景でCSS3トランジションを使用する

質問

サムネイルの上にCSSでホバー時に背景のグラデーションがフェードインするように遷移させようとしているのですが、どうすればいいでしょうか？遷移はうまくいっていないのですが、これを単純に rgba() の値で、正常に動作します。グラデーションはサポートされていないのでしょうか？画像も使ってみましたが、画像も遷移しません。

他の投稿で誰かがやっていたので、可能なのは分かっているのですが、具体的にどうすればいいのか分かりません。何かあれば教えてください> ここにCSSがあるので、それを使って作業します。

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

解決方法は？

グラデーションはまだ遷移をサポートしていません（現在の仕様では、補間によってグラデーションのようなものからグラデーションのようなものへの遷移をサポートすべきとされていますが）。

背景のグラデーションでフェードイン効果を出したい場合は、背景のグラデーションに 不透明度 をコンテナ要素に追加し、不透明度を「遷移」させます。

(グラデーションでの遷移をサポートしたブラウザもリリースされています(例：IE10。2016年にIEでグラデーションのトランジションをテストしたところ、当時は動作していたようですが、私のテストコードはもう動作しません)

更新情報 2018年10月 接頭辞のない新しい構文[例：radial-gradient(...)]によるグラデーション遷移は、Microsoft Edge 17.17134 で動作を確認しました（またか）。いつから追加されたのか分かりませんが。最新のFirefox & Chrome / Windows 10ではまだ動作していません。

更新日：2021年12月 最近のChromiumベースのブラウザでは、@propertyの回避策で可能になりました（ただし、Firefoxでは使えません）。以下の@mahozadの回答を参照してください。