グラデーションの背景で CSS3 トランジションを使用する

Question

CSS を使用して、マウスオーバー時にサムネイルにトランジションを作成して、ホバー時に背景がフェードインするようにしようとしています。変換は機能しませんが、それを rgba()value に変更するだけで正常に機能します。グラデーションには対応してないのでしょうか？画像を使用してみましたが、画像も変換されません。

誰かが別の投稿で同じことをしたので、これが可能であることはわかっていますが、正確な方法はわかりません。ヘルプ> 使用できる CSS をいくつか示します:

#container div a {
  -webkit-transition: バックグラウンド 0.2 秒のリニア。
  -moz-transition: バックグラウンド 0.2 秒のリニア。
  -o-transition: バックグラウンド 0.2 秒のリニア。
  トランジション: バックグラウンド 0.2 秒リニア。
  位置: 絶対;
  幅: 200ピクセル;
  高さ: 150ピクセル;
  ボーダー: 1px #000 ソリッド;
  マージン: 30px;
  Zインデックス: 2
}

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

Answer 1

解決策の 1 つは、背景の位置を変換してグラデーション変化効果を作成することです。 http://sapphion.com/2011/10/css3-グラデーション遷移と背景の位置/

リーリー リーリー

Answer 2

グラデーションはまだトランジションをサポートしていません (ただし、現在の仕様では、補間を介してグラデーションのようなトランジションからグラデーションのようなトランジションをサポートする必要があると記載されています)。

背景のグラデーションを使用したフェードイン効果が必要な場合は、コンテナ要素に 不透明度 を設定し、不透明度を「遷移」する必要があります。

(グラデーション トランジションをサポートするブラウザのバージョンはすでにいくつかあります (例: IE10。2016 年に IE でグラデーション トランジションをテストしました。その時点では機能しているように見えましたが、テスト コードはもう機能しません。)

更新日: 2018 年 10 月 プレフィックスのない新しい構文 [例: Radial-gradient(...)] を使用したグラデーション トランジションが、Microsoft Edge 17.17134 で (再び?) 動作することが確認されました。これがいつ追加されたのかはわかりません。最新の Firefox および Chrome / Windows 10 ではまだ動作しません。

更新日: 2021 年 12 月 @property の回避策は、最近の Chromium ベースのブラウザで利用できるようになりました (ただし、Firefox では機能しません)。以下の @mahozad の回答 (または上記の YMMV) を参照してください (そして投票してください)。