css animation not played after another class - css

Question

I have a mini game of a deck of cards that when a card is clicked I have a css animation to flip the card over.
I have a second css class that I add with jQuery to animate the cards if they match. However when I add the second css class the animation does not play because of the first css animation class. If I was to remove the class flip the second animation will play but I cannot do this as I need to keep the flip class.
.card {
position: relative;
height: 6rem;
border-radius: 5px;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 5px 5px 0px 0px rgba(218,218,218,1);
}
.card:active {
transform: scale(0.97);
transition: transform .2s;
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 5px;
}
.card.flip {
transform: rotateY(180deg);
}
.card-front {
transform: rotateY(180deg);
}
Now when I add the class .card-heartbeat ti the element which already has the classes card flip nothing happens
.card-heartbeat {
-webkit-animation: heartbeat 1.5s ease-in-out both;
animation: heartbeat 1.5s ease-in-out both;
}
/**
* ----------------------------------------
* animation heartbeat
* ----------------------------------------
*/
#-webkit-keyframes card-heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes card-heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
I am wondering is a clash of transform?

Answer 1

adding rotateY(180deg) fixed the issue in the animation