CSS 无法设置旋转动画

Question

我想为我的对象设置动画旋转。我使用 perspective & preserve-3d 属性，然后手动尝试 transform:rotate(15deg) 或任何度数，它工作正常

然后我使用addClass来触发动画。我有 4 个属性可以设置动画（缩放、旋转、不透明度和位置）。位置、不透明度和比例都很好，但旋转不是。

我已经尝试删除位置、不透明度和比例，只是为了单独测试旋转，但仍然不起作用。

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

完整代码：Codepen

Answer 1

删除关键帧之间的 ;

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

CSS 无法设置旋转动画

CSS can't animate rotation

css

animation

rotation

transform