Animations starts after movement is finished

Im currently working on a 3d grid game where the player can control the character with the arrow keys. The movement is working fine, what doesnt work is to synch it with the animation. After the player presses a button the character should move to the next field while the animation is playing and the animation should obviously end after the player reaches the field.

My script looks like this (Im using methods to get the pressed keys which send the next field via Vector3 to the IEnumerator):

Code (CSharp):

1. //Make smoth grid animation possible
2.     private IEnumerator MoveTransform(Vector3 direction, float speed)
3.     {
4.         // Calculating end position
5.         Vector3 target = transform.position + direction;
6.         float transition = 0;
7.  
8.         //Animatorx
9.         animator.SetInteger("animation", 3);
10.  
11.         while (transition < 1)
12.         {
13.  
14.             // Adding time to transition percent and Waiting one frame
15.             transition += Time.deltaTime * speed;
16.             yield return new WaitForEndOfFrame();
17.  
18.             // Moving the Transform this frame
19.             transform.position = Vector3.Lerp(transform.position, target, transition);
20.         }
21.  
22.         // Making sure it's perfect
23.         transform.position = target;
24.         movementRoutine = null;
25.  
26.         //Animatorx End movement
27.         animator.SetInteger("animation", 0);
28.     }

My animator and the way i set up the transitions are attached. Wheres the mistake?

Thanks in advance

 

Okay, after bruteforcing the living hell out of the code for the last hour i found my problem:

transform.position = Vector3.Lerp(transform.position, target, transition)

This "transition" caused the script to go crazy. I have no idea why but when i change it to a fixed value it works perfectly. The problem is kinda solved but it would be nice to know what the problem was?