CSS3 Width Transitions
I was writing a widget and wanted to create a 'slide-out' effect using CSS3 transitions. Essentially, I wanted to only show part of the widget until the user hovered on it.
Since the hidden part of the widget was of variable-width, I couldn't simply transition between two fixed widths, so to show the entirety of the widget I was using width: auto.
Unfortunately, there's an issue with width transitions and the auto value, described here, and it doesn't really work.
However, in the above link Paul Irish mentions an excellent solution: using min-width and max-width instead. While I didn't know how wide the widget was going to be, I did know how wide it could get. So I specified that with max-width, and the browser took care of the rest.
My final style looked something like this:
.widget {
overflow: hidden;
max-width: 100px;
-webkit-transition: max-width .5s ease;
transition: max-width .5s ease;
}
.widget:hover {
max-width: 200px;
}Written by Ryland Herrick
Related protips
5 Responses
Does it work in FF? Animating transitions using max/min-width/height was always really choppy for me in FF. Chrome seemed to be the only one doing it correctly.
I had to fall back to using height/width and JS.
A coworker did some compatibility testing and found that IE6 was an issue, and IE7 didn't animate the transition. I was testing with FF 16.0.1 and didn't have any issues, but it's quite possible that older versions might. When I get some time I'll do some tinkering. Thanks!
Ahhh @rylnd, CSS3 transition support only kicked in with IE10 - so anything below will ignore the transition directives.
I used width:100%; and it eased out to the exact width of text.
In my case, I have created a circle button with a div using a gradient background and a "Plus" icon that when hovered, the title will show using transitions and the button expands gradually to the right of the "Plus" icon to reveal the title. It works extremely well and I don't have to worry about using a fixed width at all. I only tested in Firefox at the moment, but this is the only browser we support internally for our company.
@drumsticks, glad to hear that works for you! I'd love to see a protip with some examples so we could try it out!
Have a fresh tip? Share with Coderwall community!
