title: Angular CSS3 keyFrames for animations
body: <p>In an angular project we're using the following CSS properties (in scss stylesheets) to animate an element:</p>
  
  <pre><code>@keyframes animationName {
    0% {
      y: 10
    }
    100% {
      y: 500;
    }
  }
  
  .svgRectangle {
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: animationFirst;
    animation-duration: 0.8s;
  }
  </code></pre>
  
  <p>The problem:
  While these animations are working very well in the devleopment server (<code>ng serve</code>), 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).</p>
  
  <p>After digging and trying around some time, it turns out, that disabling <code>aot</code> and <code>buildOptimizer</code> (defaulting to true) will create a prod build with the animations working.</p>
  
  <p>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).</p>