CSSアニメーションは消えません

Question

ホバーすると背景画像がフェードインおよびフェードアウトするという単純なアニメーションの問題を解決しようとしています。キーフレームを定義したにもかかわらず、Web ブラウザではキーフレームが未定義であると言われます:

.elementor-section.elementor-element.core-range
     > .elementor-container:hover
     .product-image::before {
     アニメーション: coreRangeBackground 0.3 秒、イーズインアウト 0.3 秒。
     アニメーションフィルモード: 順方向;
  }

  @keyframes coreRangeBackground {
     100% { 背景画像: url("./images/core-range-bg.svg"); }
  }

  .要素セクション.要素要素.月の満ち欠け
     > .elementor-container:hover
     .product-image::before {
     アニメーション名:phasesMoonBackground;
     アニメーション期間: 0.3 秒。
     アニメーション タイミング関数: イーズインアウト;
     アニメーション遅延: 0.3秒;
     アニメーションフィルモード: 順方向;
  }

  @keyframesphaseMoonBackground {
     100% { 背景画像: url("./images/phases-of-the-moon-bg.svg"); }
  }

編集: 背景画像をアニメーション化できません。代わりに不透明度を使用してください

画像はグラデーションでフェードインしますが、ホバーをキャンセルすると、フェードアウトせずにすぐに画像なしに切り替わります。

.elementor-section.elementor-element.product-card
     > .elementor-container
     .product-image::before {
     トランジション: すべて 0.3 秒のイーズインアウト。
     位置: 絶対;
     幅: 100%;
     高さ: 100%;
     背景リピート: リピートなし;
     背景サイズ: カバー;
     トップ: 0;
     左: 0;
     表示ブロック;
     コンテンツ： "";
  }

  .elementor-section.elementor-element.core-range
     > .elementor-container:hover
     .product-image::before {
     アニメーション: productCardBackgroundHover 0.3 秒イーズインアウト;
     アニメーションフィルモード: 順方向;
     背景画像: url("./images/core-range-bg.svg");
  }

  .要素セクション.要素要素.月の満ち欠け
     > .elementor-container:hover
     .product-image::before {
     アニメーション: productCardBackgroundHover 0.3 秒イーズインアウト;
     アニメーションフィルモード: 順方向;
     背景画像: url("./images/phases-of-the-moon-bg.svg");
  }

  @keyframes productCardBackgroundHover {
     0% { 不透明度: 0; }
     100% { 不透明度: 1; }
  }

Answer 1

問題は、不透明度が遷移しないことです。これは、ホバー時に背景画像を設定しているためです。そのため、ホバーがない場合、不透明度が遷移し、画像はすぐに自然に消えます。 リーリー