Angular CSS3 keyFrames for animations

Question

In an angular project we're using the following CSS properties (in scss stylesheets) to animate an element:

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

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

The problem: While these animations are working very well in the devleopment server (ng serve), they're not working when building the production build of the project. Looking into the source of the page, the keyFrame is not there anymore (the css properties are there).

After digging and trying around some time, it turns out, that disabling aot and buildOptimizer (defaulting to true) will create a prod build with the animations working.

The question for me now is: Is that normal and intended? If so, how can I use native CSS animations, without needing to convert them into angular animations (that would probably be an option I already found in other threads here, however, I would prefer to stay with the css animations if possible).

Answer 1

Ok, after putting the CSS statements into the base scss file I got the following errors when building a production build:

WARNING in Invalid property name 'y' at 2117:4. Ignoring.

So, the problem is quite obvious, I changed the y to transforms and the build is running now. I'll probably ask the angular guys if it's possible to give these warnings also when the invalid properties are used in a component style file.