CSS can't animate rotation

I want to animate rotation of my object. I use perspective & preserve-3d properties, and try transform:rotate(15deg) or any degrees manually and it works fine

Then I use addClass to trigger the animation. I have 4 properties to animate (scale, rotate, opacity & position). The position, opacity, & scale works just fine, but the rotation aren't.

I already tried to delete the position, opacity, & scale just to test the rotation alone, and still not working.

.flip-animation {
  animation: flipper 2s;
    }


@keyframes flipper {
  0% {
    transform:
      rotateY(0deg)  
      scale(0,0)
      translate(0px, 1000px);
    opacity:0;
  };
  100%{
    transform:
      rotateY(900deg) /*any number not working*/
      scale(1,1)
      translate(0px, 0px);
    opacity:1;
  };
  }

Full Code: Codepen

remove ; between keyframes

.flip-animation {
  animation: flipper 2s;
    }


@keyframes flipper {
  0% {
    transform:
      rotateY(0deg)  
      scale(0,0)
      translate(0px, 1000px);
    opacity:0;
  }
  100%{
    transform:
      rotateY(900deg) /*any number not working*/
      scale(1,1)
      translate(0px, 0px);
    opacity:1;
  };
  }