Animation doesn't fully play.

So I am animating a bear, I've gotten it all pretty much the basic that I want it, but there is a problem. Basically what I have this script do, is when the bear gets within X amount of units away, the bear will stop running and instead will play the attack animation in 3 second intervals so long as the player is within range. The problem is, the animation starts to play for a brief moment and then goes back to the other. Basically it just looks like the bear is flinching. Here is my code:

 #pragma strict
 
 public var bearHealth : float;
 public var target : Transform;
 public var bear : GameObject;
 public var player : GameObject;
 public var bearWalkSpeed : float;
 public var bearRunSpeed : float;
 
 function Start () {
 
     bearWalkSpeed = Time.deltaTime * 8;
     
 
 }
 
 function Update () {
 
 
 
 var distance = Vector3.Distance(player.transform.position, bear.transform.position);
 
     if(distance <= 25) {
     
         transform.LookAt(target);
         animation.CrossFade("idle4Legs");
         
             if(distance >4 && distance <=15) {
             
                 transform.position = Vector3.MoveTowards(transform.position, target.position, bearWalkSpeed);
                 animation.Play("run");
                 
                     if(distance <=5) {
                                                 
                         animation.CrossFade("idle4Legs");
                         InvokeRepeating("Attack", 0, 3);
                     
                     }
         }
     }
 }
 
 function Attack () {
 
     animation.CrossFade("4LegsClawsAttackL");
 
 }

I think the problem is that the script is trying to get it to play 2 animations at once, but I am not quite sure to be honest. If anyone would be kind enough to point out what is wrong and a possible solution I would greatly appreciate it. Thank you in advance.