[Bottom Property not animating properly. (Sometimes)]

I have a fixed positioned div with a bottom value of 10%. When i try to animate the div to the middle of the screen it only animates the left property. Then when the animation is done, the div jumps via the bottom 50% value set in the javascript code.

 

However, When i set the original bottom value to 0. It animates properly. Any idea why?

 

I created a codepen but could not replicate the situation. 

Here is the Codepen i created with the same exact javascript code

See the Pen XEdmRL by chibieee (@chibieee) on CodePen

 

I have created gifs to show the problem.

Here is the gif with the bottom: 0;

 

And here is the gif with bottom: 10%;

 

Thanks in advance!