Repository: angular
Issue: Animations behaving differently despite equivalent definitions
Labels: type: bug/fix,area: animations,freq2: medium,P3

<!--
PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.

ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
-->

## I'm submitting a...
<!-- Check one of the following options with "x" -->
<pre><code>
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre>

## Current behavior
<!-- Describe how the issue manifests. -->
I have been trying to get this animation to work where a modal dialog expands out from the click location. When I define the animation using states, it looks like the dialog is "swooping" in from the location (and if i slow it down in the chrome animations debugging tool, it looks like the dialog expands out towards the middle of the screen and then moves upwards). If i change the animation to have inline styles defined, everything works as expected.

Non-working "swooping" animation: 
```typescript
state(void, style({
   left: '{{startX}}px',
   top: '{{startY}}px',
   transformOrigin: '{{transformOrigin}}',
   opacity: '0',
   transform: 'scale(0.01)'
}), { params: { startX: 0, startY: 0, transformOrigin: 'top left' }}),
state('OPEN', style({
   left: '50%',
   top: '138px',
   opacity: '1',
   transform: 'scale(1) translateX(-50%)'
})),
transition('void => OPEN', animate(200))
```

Working option:
```typescript
transition(`void=> OPEN`, [
   style({
      left: '{{startX}}px',
      top: '{{startY}}px',
      transformOrigin: '{{transformOrigin}}',
      opacity: '0',
      transform: 'scale(0.01)'
   }),
  animate(200, style({
     left: '50%',
     top: '138px',
     opacity: '1',
     transform: 'scale(1) translateX(-50%)'
  })) 
], { params: { startX: 0, startY: 0, transformOrigin: 'top left' }})
```

## Expected behavior
<!-- Describe what the desired behavior would be. -->
I would expect both of these animation definitions to be equivalent. The only difference I can see is that obviously the one with state definitions keeps those styles applied to the element after the transition is do ne

## Minimal reproduction of the problem with instructions
<!--
For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
-->
Hard to get a reproducible version of this because the dialog is being added into an auxiliary router outlet. (I also tried getting the "router driven animations" to work and never was able to) 

## What is the motivation / use case for changing the behavior?
<!-- Describe the motivation or the concrete use case. -->


## Environment

<pre><code>
Angular version: 4.3.4
<!-- Check whether this is still an issue in the most recent Angular version -->

Browser:
- [x] Chrome (desktop) version 60.0.3112.90
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  <!-- run `node --version` -->
- Platform:  <!-- Mac, Linux, Windows -->

Others:
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>