如何應用縮放效果，而不是懸停效果

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

查看當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類分配給這些元素。