CSS transition with background gradient

Question

I'm learning about animations/transitions with CSS3, but in this code the transition don't worked... why?

HTML:

<div id="test">
</div>

CSS:

#test {
    background-color: #333;
    background-image: -webkit-linear-gradient(top, #333, #666);
    width: 100px;
    height: 100px;
    -webkit-transition: background 1s linear;
}

#test:hover {
    background-image: -webkit-linear-gradient(top, #666, #999);
}

http://jsfiddle.net/LLRfN/

possible duplicate of Webkit support for gradient transitions - seems like you're out of luck for now — kapa
– kapa, Commented Oct 17, 2011 at 17:35

locrizak · Accepted Answer · 2011-10-17 18:26:30Z

2

This works for me as it should intended. A couple things, this will only work in google chrome if you want it to work in other browsers:

Here is a generator

Here is an explanation

edit

Sorry I didn't realize there was a transition property in there. After doing some googling and trying some stuff out on my own, it is pretty clear that transitions on background gradients isn't possible... yet.

Here is a good article on how to get it to work with a little bit of a hack

http://nimbupani.com/some-css-transition-hacks.html

edited Oct 17, 2011 at 18:26

answered Oct 17, 2011 at 17:32

locrizak

12.3k12 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GianFS · Accepted Answer · 2011-10-17 17:33:09Z

0

its working fine on me. have you wrapped the css file with tag?

<style>
#test {
background-color: #333;
background-image: -webkit-linear-gradient(top, #333, #666);
width: 100px;
height: 100px;
-webkit-transition: background 1s linear;
}

#test:hover {
background-image: -webkit-linear-gradient(top, #666, #999);
}
</style>
<div id="test">
</div>

answered Oct 17, 2011 at 17:33

GianFS

2,6252 gold badges24 silver badges21 bronze badges

1 Comment

Caio Tarifa Over a year ago

Realy?! I've tested in Chrome and Safari but don't the transition effect don't worked ):

defau1t · Accepted Answer · 2011-10-17 18:07:36Z

0

It worked for me, Also I can point you to the CSS3 playground where you can check it on the fly

CSS3 Playground

answered Oct 17, 2011 at 18:07

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

Comments

Lukas Domonkos · Accepted Answer · 2014-01-26 00:26:27Z

Gradient transition can by done with little bit of "cheating". I am definitely not pro in css stuff (and I am new here so don't hate me fast :D ), but just place to divs on top of each other, one with opacity 1 and second with 0. (Each div has set different gradients) On hover, change opacity from 1 to 0 and vice versa.

Set timing function and however these divs are placed on each other z-index property do the rest. (Optimized for Safari) Maybe rookie way, but this works (surprisingly) perfectly:

 #divgradient1
    {
     z-index:-1;
     height:100px;
     background: -webkit-linear-gradient(90deg, red, blue);
     background: -o-linear-gradient(90deg, red, blue);
     background: -moz-linear-gradient(90deg, red, blue); 
     background: linear-gradient(90deg, red, blue);

     opacity:1;
     transition:background,opacity,z-index;
     -webkit-transition:background,opacity,z-index ;
     transition-duration: 1s;
     -webkit-transition-duration: 1s;
    }

 #divgradient1:hover{
    z-index:-1;
    opacity:0;        
    transition:background,opacity,z-index;
    -webkit-transition:background,opacity,z-index;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    }


 #divgradient2:hover{
    opacity:1;
    z-index:2;
    background: -webkit-linear-gradient(-90deg, red, blue);
    background: linear-gradient(-90deg, red, blue);
    transition:background,opacity,z-index;
    -webkit-transition:background,opacity,z-index;
    transition-duration: 1s;
    -webkit-transition-duration: 1s; 
    }


 #divgradient2
    {
    z-index:1;
    opacity:0;
    height:100px;        
    background: -webkit-linear-gradient(-90deg, red, blue);
    background: linear-gradient(-90deg, red, blue);
    transition:background,opacity,z-index;
    -webkit-transition:background,opacity,z-index;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    }

and whatever-it-should-look-like divs:

    <div id="divgradient1" style="position:absolute;width:100px;"></div>
    <div id="divgradient2" style="position:absolute;width:100px;"></div>

Collectives™ on Stack Overflow

CSS transition with background gradient

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related