3

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?

Autonomic
  • 150
  • 4
  • 15

2 Answers2

6

Edit: In the modern day web you can use CSS variables as a part of your gradient and animate them instead to do this sort of animation. The below still works if you need it (for browser support).

Background images are not animatable. Since gradients in CSS use background images, you cannot use a transition to a new one like you would text color.

With that being said, if you only have text in the drop downs, you can do a work around using a pseudo element and animating its opacity instead. The following is an example of how to do so:

.container:after {
    content: "";
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
    background-image: -webkit-linear-gradient(top, #FF0000, #770000);
    background-image: -moz-linear-gradient(top, #FF0000, #770000);
    background-image: -ms-linear-gradient(top, #FF0000, #770000);
    background-image: -o-linear-gradient(top, #FF0000, #770000);
    background-image: linear-gradient(top, #FF0000, #770000);
    position:absolute;
    top:0;left:0;
    opacity:0;
    width:100%; height:100%;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    z-index: -1;
}
.container:hover { color:white; }
.container:hover:after { opacity:1; }

Demo

Also, I'd remove the 900ms delay that you have (I did in my demo). It is REALLY annoying for users, they want immediate feedback, not feedback a second later.

P.S. You should localize your code to the relevant parts like I did in order to get a quicker, better response. No one wants to look through 300 lines of code for a problem that only takes 20.

Special thanks to vals for improving it using z-index.

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • 1
    It's not really necesary to duplicate the text of the element in the pseudo element content. You can get it visible adjusting the z-index of the elements. example: http://jsfiddle.net/5RUn9/1/ – vals Dec 30 '13 at 20:29
  • @vals Thanks! I figured you could but didn't spend enough time to get it working that way – Zach Saucier Dec 30 '13 at 22:20
0

Sorry bud, but transitions on gradient images are not supported yet. Yeah I think thats crazy too.

But there is hope: Here's a work around in a fiddle. You can set the background of your search input to your primary color and transition it to the secondary color on hover. This way you get a color transition effect that looks like your gradient is transitioning.

Reduced example for clarity:

.search {
 background: primary_color;
 background-image: linear-gradient(top, primary_color, secondary_color);
 transition: background 1s ease-out;
}
.search:hover {
 background: secondary_color;
}
agconti
  • 17,780
  • 15
  • 80
  • 114