如何应用缩放效果，但不应用于悬停

Question

所以我正在开发一个记忆游戏项目。

http://digitaljo.sh/memory-game/index.html

我想要完成的是在2张匹配的卡片上变焦/缩放效果，因为它们变为绿色。

（https://css-tricks.com/snippets/css/scale-on-hover-with-webkit-transition/）

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

===================================

这看起来取决于悬停在元素上的用户。当我确定2张卡匹配时，我想应用它。

我将如何更改此代码以实现此目标？

我尝试过像

这样的事情

.grow {
animation: zoom;
}

@keyframes zoom { 
    100% {
    transform: scale(1.1); 
    }
}

但这也不起作用。 （完全猜测，因为我不确定css关键帧是如何工作的。

非常感谢任何帮助，谢谢！

Answer 1

查看您在2个项目匹配时提供的链接，您将.match放在它们上面。

将您的.match课程更新为：

.card.match {
    cursor: default;
    background: #02ccba;
    font-size: 33px;
    transform: scale(1.1);
    transition: all .2s ease-in-out;
}

这样，当设置.match类时，它们会立即生长。

编辑添加过渡属性。我认为这正是你所追求的。

Answer 2

正确设置动画属性。

.grow { animation: zoom 1s normal; }

并使用卡片匹配将.grow类分配给这些元素。