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);
}
}
Edit: IE will require -ms-transform, so I added that in.