@keyframes cardAppear {
  0% {
    transform: rotate3d(0, 0, 1, 15deg) translate3d(0, -100vh, 0) rotateY(180deg) ;
  }

  30% {
    transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0) rotateY(180deg);
  }

  65% {
    transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0) scale3d(1, 1, 1) rotateY(180deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg) scale3d(1.05, 1.05, 1) rotateY(180deg);
  }
}

@keyframes cardFlip {
  0% {
    transform: rotateZ(0deg) rotateY(180deg);
  } 
  50% {
    transform: rotateZ(-10deg) rotateY(90deg);
  }
  100% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
  
}

@keyframes cardUnFlip {
  0% {
    transform: rotateZ(0deg) rotateY(0deg);
  } 
  50% {
    transform: rotateZ(-10deg) rotateY(90deg);
  }
  100% {
    transform: rotateZ(0deg) rotateY(180deg);
  }
  
}