fb-ytq
Last Updated: February 25, 2016
·
14.21K
· rylnd
Ff5dffecc90f6636461855fb52057609

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;
}
Say Thanks
Respond

5 Responses
Add your response

6878
2bebf4cb2fc99965264410111a0d2239

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.

over 1 year ago ·
6879
Ff5dffecc90f6636461855fb52057609

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!

over 1 year ago ·
6883
Df1412e1775840374894798d5ed9a7ea

Ahhh @rylnd, CSS3 transition support only kicked in with IE10 - so anything below will ignore the transition directives.

over 1 year ago ·
16819
F4739dd3b4ff3a776779b34613efb77d

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.

over 1 year ago ·
16820
Ff5dffecc90f6636461855fb52057609

@drumsticks, glad to hear that works for you! I'd love to see a protip with some examples so we could try it out!

over 1 year ago ·