CSS3 トランジションを使用してグラデーション背景を強化する

Question

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

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

リーリー

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) を参照してください (そして投票してください)。