Forums

AndyHowells

Is it possible to add a CSS transition to a CSS gradient?

I've been trying to do it, but having no luck.

Fiddle here: http://jsfiddle.net/andyunleashed/X4pLt/

I've attempted to change it on the hover but it snaps in rather than transitioning and I'm stumped.

Obviously this can probably be done with JS but I'd rather see if there's a CSS alternative.

amoss

Possible workaround here.
http://lab.tylergaw.com/css-gradient-transition-sorta/

JuanOrtizZaforas

Is not possible, but the solution amoss proposes is quite good.
Anyway, I saw you made a little mistake.

You write in your CSS


.linkbutton {transition: gradient 3s; }

gradient is the value of the property background

You animate the property, not the value. Like this:


.linkbutton {transition: background 3s; }

AndyHowells

Cool, thanks guys - I've had a "fiddle" (see what I did there?) - what do you reckon? http://jsfiddle.net/andyunleashed/X4pLt/7/

treehouse : what would you like to learn today?

Forums

Background Transition?