ホバーすると背景画像がフェードインおよびフェードアウトするという単純なアニメーションの問題を解決しようとしています。キーフレームを定義したにもかかわらず、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; } }