It looks like you aren't specifying for enough browsers at the @ level, and also in your @-moz block, the transform should just be "transform" instead of "-moz-transform" according to Mozilla's current documentation. (Since older versions of Firefox still use -moz-transform, you may have to get tricky with an @support block to manage older and newer Firefox versions at the same time.)

So essentially, you should be good to go after correcting the -moz-transform, and adding the correct support and prefixes for the other browsers.

I would try (condensed your spacing for brevity):

@-webkit-keyframes flipInX {
  /* same block as you already have */
}

@-moz-keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% { transform: perspective(400px) rotateX(-10deg); }
  70% { transform: perspective(400px) rotateX(10deg); }
  100% { transform: perspective(400px) rotateX(0deg); }
}

@-o-keyframes flipInX {  /* Opera */
  0% {
    -o-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% { -o-transform: perspective(400px) rotateX(-10deg); }
  70% { -o-transform: perspective(400px) rotateX(10deg); }
  100% { -o-transform: perspective(400px) rotateX(0deg); }
}

@keyframes flipInX {
  /* this will cover other browsers that
     support keyframes and transforms */
  0% {
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% { 
   -ms-transform: perspective(400px) rotateX(-10deg);
   transform: perspective(400px) rotateX(-10deg); 
  }
  70% { 
    -ms-transform: perspective(400px) rotateX(10deg); 
    transform: perspective(400px) rotateX(10deg);
  }
  100% { 
    -ms-transform: perspective(400px) rotateX(0deg); 
    transform: perspective(400px) rotateX(0deg);
  }
}

.whatsappbutton {
/*display:inline-block;*/
position:fixed;
/*left:auto;*/
top:auto;
bottom:0px;
/*right:20px;*/
z-index:999999999;
transition:all ease .5s;
}