CSS transition with background gradient
11,773
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:
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
Author by
Caio Tarifa
Updated on June 05, 2022Comments
-
Caio Tarifa almost 2 years
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); }
-
Caio Tarifa over 12 yearsRealy?! I've tested in Chrome and Safari but don't the transition effect don't worked ):