动画的Angular CSS3 keyFrames

Question

在角度项目中，我们使用以下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）中运行良好，但在构建项目的生产版本时它们并不起作用。查看页面的来源，keyFrame不再存在（css属性在那里）。

经过一段时间的挖掘和尝试，事实证明，禁用aot和buildOptimizer（默认为true）将创建一个动画构建与动画工作。

现在我的问题是：这是正常的吗？如果是这样，我如何使用原生CSS动画，而无需将它们转换为角动画（这可能是我已经在其他线程中找到的选项，但是，如果可能的话，我宁愿继续使用css动画）。

Answer 1

好的，在将CSS语句放入基本scss文件后，我在构建生成版本时遇到以下错误：

在2117：4处的无效属性名称“y”中出现警告。忽略。

所以，问题很明显，我把y改为变换，现在正在运行。我可能会问有角度的人在组件样式文件中使用无效属性时是否也可以提供这些警告。