Angular animate element while changing position?

Question

I'm trying to animate a div in my angular project so that it moves across the screen. The div is relatively positioned (as there are multiple elements) but when I apply animation I change it to fixed (as I can't get the exact location from a relative state and I can't send in parameters).

The problem is that the position applies to the animation exactly half way through the transition time. So if I set it for 5 seconds, at 2.5 seconds the div will change from relative to fixed. This causes the animation to jump randomly and start animating from a different spot after 2.5 seconds. Is this normal behaviour?

I've created a (basic) plunkr to show what I mean:

https://plnkr.co/edit/kSnGSqZUIkMn7y3Vv2bm?p=preview

The HTML:

  <div style="position:relative; top:0; left:0; width:20%; height:20%"
  [@routerTransition]="animation">
    <h2>Home</h2> 
  </div>
  <button (click)="animateBox()"> Animate </button>

And the animation:

return trigger('routerTransition', [
    state('*', style({   })),
    transition('* => move', animate(5000, style({position: 'fixed', left: "500px",  top: "500px",  })))

I can fix this by applying position: fixed at the very start of the animation, e.g.:

state('move', style({ position:"fixed"  })),

however then the element does not move from its starting position but rather from the fixed position.

Is there a way to start the animation from the relative position but then animate it to a different (fixed) position while avoiding the "jump" midway through?