html - 如何应用缩放效果，但不在悬停时

Question

所以我目前正在做一个内存游戏元素。

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 关键帧是如何工作的。

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

Answer 1

正确设置动画属性。

.grow {
动画:缩放 1s 正常；
}

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