动画后无法应用悬停效果 - React

Question

首先大家晚上好。我正在为 MMO 服务创建一个在线商店，我有这样做的想法：

卡片图片

这些卡片从左到右进入动画，一张一张地出现。在我看来很酷，但问题在于卡片的最终状态。我希望它们在悬停时缩放 10%，但我似乎无法使其工作。我尝试将hover:scale-110添加到相应的className中，但没有成功。

我想澄清一下，这是我的第一个开发。

卡片代码：

{/* Home third section | content */}
            <div ref={sectionRef} className="bg-purple border-t-4 border-white h-auto min-h-[32rem] md:min-h-[36.8rem] xl:min-h-[41.4rem] border-b-4 pb-24">
                <h2 className="text-white text-8xl font-extrabold text-center mt-24 mb-32">Why Choose Us?</h2>
                <div className="flex justify-around items-center mt-16">
                    {[
                        { text: 'Efficiency', imageUrl: card1 },
                        { text: 'Highest Value', imageUrl: card2 },
                        { text: 'Reliability', imageUrl: card3 },
                        { text: 'Well-Being', imageUrl: card4 },
                    ].map((card, index) => (
                        <div
                            key={index}
                            className="card bg-cover bg-center bg-no-repeat rounded-lg w-64 h-96 md:w-72 md:h-[28rem] lg:w-80 lg:h-[32rem] opacity-0 transform transition-transform duration-800 ease-in-out hover:scale-110"
                            style={{
                                backgroundImage: `url(${card.imageUrl})`,
                            }}
                        >
                            <div className="text-white p-4">
                                <h3 className="text-lg font-bold">{card.text}</h3>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

我有一些与此相关的 index.css 行：

@keyframes fadeInLeft {
  from {
      opacity: 0;
      transform: translateX(-50%);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.card {
  transition: transform 0.5s ease-in-out; /* Smooth scaling transition */
}

.card:hover {
  transform: scale(1.1); /* Scale up the card by 10% */
}

我没有在 className hide:scale-110 的同时尝试 .card 类的 CSS 属性。我分别尝试了它们，但我将两者都包含在内以表明我已经尝试了两种方法。

提前非常感谢您的帮助！

我解释了我之前尝试过的内容！

Answer 1

将 css 代码更改为此，它应该可以工作。

.card {
    animation: fadeInLeft 1s forwards;
    transition: scale 0.5s ease-in-out; /* Smooth scaling transition */
}

.card:hover {
    /*transform: scale(1.1); !* Scale up the card by 10% *!*/
    scale: 1.1;
}

你不能在两个不同的地方对一个元素应用变换，只有其中一个有效。您在动画关键帧中做过一次。