サムネイルの上に 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)))
}
ベストアンサー1
これは@property回避策を使用することで可能になりました。@Mahozad の回答。
元の回答:
グラデーションはまだ遷移をサポートしていません (ただし、現在の仕様では、補間を介してグラデーションからグラデーションへの遷移をサポートする必要があるとされています)。
背景グラデーションによるフェードイン効果が必要な場合は、コンテナ要素に不透明度を設定し、その不透明度を「遷移」する必要があります。
(グラデーションの遷移をサポートするブラウザのリリースがいくつかありました (例: IE10)。2016 年に IE でグラデーション遷移をテストしましたが、当時は動作しているようでしたが、私のテスト コードは動作しなくなりました。)
2018 年 10 月の更新: プレフィックスのない新しい構文 (例: 放射状グラデーション (...)) を使用したグラデーション遷移が、Microsoft Edge 17.17134 で (再び?) 動作することが確認されました。これがいつ追加されたかはわかりません。最新の Firefox および Chrome / Windows 10 ではまだ動作しません。