html - 如何应用缩放效果，而不是悬停效果

所以我目前正在做一个记忆游戏项目。

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

我要完成的是在两张匹配的卡变绿时的缩放/缩放效果。

（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); }

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

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

我将如何更改此代码来实现这一目标？

我尝试做类似的事情

.grow {
animation: zoom;
}

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

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

任何帮助将不胜感激，谢谢！

最佳答案

正确设置动画属性。

.grow {animation: zoom 1s normal;}

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