CSS3 gradient transition with background-position
2011
25
October
7:42 am
Although you can’t directly animate gradients using the CSS transition property, it is possible to animate the background-position property to achieve a simple gradient animation:
The code for this is dead simple:
#DemoGradient{ background: -webkit-linear-gradient(#C7D3DC,#5B798E); background: -moz-linear-gradient(#C7D3DC,#5B798E); background: -o-linear-gradient(#C7D3DC,#5B798E); background: linear-gradient(#C7D3DC,#5B798E); -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition: background 1s ease-out; transition: background 1s ease-out; background-size:1px 200px; border-radius: 10px; border: 1px solid #839DB0; cursor:pointer; width: 150px; height: 100px; } #DemoGradient:Hover{ background-position:100px; }
<div id="DemoGradient"></div>
If you have any questions, feel free to comment and ask!
I always appreciate a challenge.
Posted in:
Design
Doesn’t work buddy…
WordPress-related formatting issues with the demo. Code is fine though.
The demo should be fixed now, sorry about that.
It’d be nice to finally get a simple ability to :hover a new background gradient, but oh well. This is definitely well worth a hover effect if you don’t want to go to solid bg color.