Geek Answers Handbook

CSS transition with background gradient

I am learning animation / transitions with CSS3, but the transition does not work in this code ... 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/

+7
source share
4 answers

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

Here is the generator

Here is an explanation

change

Sorry, I didn’t understand that there is a transition property there. After I made a few searches and tried some things myself, it’s pretty clear that transitions on background gradients are not yet possible ...

Here is a good article on how to make it work with a little hack

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

+2
source

him working on me. did you wrap the css file with the 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>
0
source

It worked for me. I can also point you to a CSS3 site where you can check it on the fly

CSS3 Playground

0
source

A gradient transition can be performed with a bit of "cheating". I'm definitely not a professional in css stuff (and I'm new here, so I don't hate me quickly: D), but just put them in divs on top of each other, with opacity 1 and a second from 0. (Each div sets different gradients). When hovering, change the opacity from 1 to 0 and vice versa.

Set the synchronization function, and yet, these divs fit on top of each other, the z-index property does the rest. (Optimized for Safari) Maybe a beginner, but it 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 no matter what it should look like: div /

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

More articles:


All Articles