1

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).

Florian
  • 2,796
  • 1
  • 15
  • 25
  • 1
    How is your order of inception created? Does the animation exist in the same place as your css class? I ask because personally I like to break things animations out into their own file, along with other things like mixins etc, then have a parent with like @import './animations';@import ',/mixins'; so the order of inception loads animations first for reference from imports below it after the precompile. – Chris W. Sep 12 '18 at 19:05
  • I hope I get your question right, here the answer: the css class definition is in the same file as the keyframes (assume, that the above code-example is cut from the original file as is), so the ordering shouldn't be a problem. – Florian Sep 12 '18 at 20:50
  • Ya that's not it then, what version of angular and what version of angular CLI? Also, is this css in a component level scss file or have you tried in the base /src/styles.scss and got the same result? At first glance it makes no sense if you see the class etc when inspecting in the browser... -- oh, and stick to css when ya can and keep on the compositor thread instead of UI (I don't understand why people push JS anim so much :/) – Chris W. Sep 12 '18 at 21:38
  • The CSS currently is in the component level scss file at the moment. Versions: Angular CLI: 6.1.1 Angular: 6.0.9 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router I'll try to put it into the global scss file and respond back then :) – Florian Sep 13 '18 at 18:22
  • Thanks for the hint, see my answer, it's working when I don't use "invalid" properties. – Florian Sep 13 '18 at 18:40

1 Answers1

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.

Florian
  • 2,796
  • 1
  • 15
  • 25
  • 1
    Ah crap, didn't even notice the x/y in relation to the svg props aber das ist wirklichkeit. Glad you got a remedy. :) – Chris W. Sep 13 '18 at 19:10