I am hoping someone can help clear this up. 

I'm working on a search bar using HTML5 CSS3 here is the working example <http://jsfiddle.net/4Mr6D/>

```
 text-decoration: none;
transition: all 400ms;
-webkit-transition: all 400ms; 
-moz-transition: all 400ms; 
-o-transition: all 400ms;

```

starting line 164 or where I commented 'SEARCH RESULTS'
I am trying to get the gradient background to animate on hover, it seems to only work animating back to the original color on rollout.

I've tried using background-image to animate, that doesn't work. I then turned to using the keyword 'all' and that isn't working.

So far, only the text color will animate. Can someone help me and locate what I'm doing wrong in getting the background gradient to animate also?