CSS3 Animation+Transition giving me a problem...

[Travis Lehman]

I am having a problem with CSS3s new Animation and Transition.What I am trying to do is, when I hover over my menu text, it will slowly change from a black background with white text, to a white background with black text (useing transition), AND along with animation, make it so that if my mouse is over the text it will keep switching from black with white to white with black.The problem I am having is, if you hover over the link and take your mouse off fast it will turn to a black background with black text, and the text will slowly turn back to white. I am pretty new to css3 (but pretty experienced with css), and what seems to be happening is the transition and/or animation (not sure which) stops after I take my mouse off the link. But what is odd is it only stops the text from working, the background works fine.Here is my code, if someone could please help me find the problem, I would really appreciate it. I have tried everything I could think of and nothing works...

#menubar_links_link:link, #menubar_links_link:visited {background:#000000;color:#ffffff;margin:0px -3px 0px 0px;padding:5px;text-decoration:none;-webkit-transition:background 2s linear, color 2s linear;} #menubar_links_link:hover, #menubar_links_link:active {background:#ffffff;color:#000000;padding:5px;text-decoration:none;-webkit-animation:link_hover 2s linear 0s infinite;-webkit-transition:background 2s linear, color 2s linear;} @-webkit-keyframes link_hover {0% {background:#000000; color:#ffffff;}50% {background:#ffffff; color:#000000;}100% {background:#000000; color:#ffffff;}}