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

グラデーション背景で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)))
}

ベストアンサー1

これは@property回避策を使用することで可能になりました。@Mahozad の回答


元の回答:

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

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

(グラデーションの遷移をサポートするブラウザのリリースがいくつかありました (例: IE10)。2016 年に IE でグラデーション遷移をテストしましたが、当時は動作しているようでしたが、私のテスト コードは動作しなくなりました。)

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

おすすめ記事