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;
};
}