title: Invalid keyframe value for property transform: transform: translateX(0px) translateZ(0px) in angular animation
body: <p>I have this simple animation:</p>
  <pre><code>trigger('slide', [
      state(
          'true',
          style({
              transform: 'transform: translateX(0px) translateZ(0px)',
              opacity: 1,
          }),
      ),
      state('false', style({ transform: 'translateX(100%) translateZ(0px)', opacity: 0 })),
      transition('* =&gt; *', animate(200)),
  ]),
  </code></pre>
  <p>which I use on my menu component like this:</p>
  <pre><code> [@slide]=&quot;isExpanded&quot;
  </code></pre>
  <p>It works, but chrome has this warning:</p>
  <blockquote>
  <p>Invalid keyframe value for property transform: transform: translateX(0px) translateZ(0px)</p>
  </blockquote>
  <p>Does anyone know why?</p>