用于动画的角度CSS3关键帧

在angular项目中,我们使用以下CSS属性(在scss样式表中)为元素设置动画:

@keyframes animationName {
  0% {
    y: 10
  }
  100% {
    y: 500;
  }
}

.svgRectangle {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: animationFirst;
  animation-duration: 0.8s;
}

问题是: 虽然这些动画在devleopment服务器上运行得很好( ng serve ),它们在构建项目的生产构建时不起作用。查看页面的源代码,关键帧不再存在(css属性在那里)。

经过一段时间的挖掘和尝试,结果发现 aot 和 buildOptimizer (默认为true)将创建动画工作的产品构建。

我现在的问题是:这是正常的和有意的吗?如果是这样的话,我如何使用本机CSS动画,而不需要将它们转换为角度动画(这可能是我在这里的其他线程中已经找到的一个选项,但是,如果可能的话,我更愿意使用CSS动画)。