webkit-transition, anomaly when using width:auto

Question

I have a sidebar navigation in standard <ul><li><a></a></li></ul> pattern which truncates the full text of the links using overflow hidden. After hovering for 1s, I want the the anchor to expand in width, showing the full text of the link.

I have this functionality working completely in CSS, but I'm running into anomaly: I have the width of the anchor set to Auto on :hover. After the 1s delay is triggered, the width of anchor snaps to 0 and then expands out to its full width.

below is my css, and here you can see my current code in action: http://eventfeedstl.com/day/07182011/

.day .sidebar{
 width: 200px; 
 }
.day .sidebar ul {
 list-style: none;
 padding: 0;
 margin:0;
 position: absolute;
 width: auto;
 }
.day .sidebar ul li{
 border-bottom: 1px solid #626666;
 display: relative;
 width: 200px;
 }
.day .sidebar ul li:hover{
 width: auto;
 }
.day .sidebar ul li a{
 font-weight: normal;
 font-size: .8em;
 color: #f2f2f2;
 display: block;
 width: auto;
 padding: 4px 5px;
 background: none;
 width: 190px;
 height: 10px;
 overflow: hidden;
 position: relative;
 z-index: 10;
 -webkit-transition: background 1.3s ease-out;
 -moz-transition: background 1.3s ease-out;
 transition: background-color 1.3s ease-out; 
 }
.day .sidebar ul li a:hover {
 background: #797979;
 -webkit-transition: background 0.15s;
 -moz-transition: background 0.15s;
 transition: background 0.15s;
 text-decoration: none;
 width: auto;
 -webkit-transition-property:width;
 -webkit-transition-delay:1s;
 position: relative;
 } 

Answer 1

You are overwriting your transitions between background and width, which is probably causing problems. There is a way to set multiple transitions but I'm fairly sure this way will cause problems.

But

In general transitioning to auto doesnt work yet. I like to use min-width and max-width in these cases to approximate the effect.

• Rampant Creative Group: Thanks Paul, that's helpful. I'll play around with min/max width, and see if I can get the effect working without the bg transition
• abernier: Awsome! Very neat technique! +✓

Answer 2

A solution for toggling between a specific width and auto: The only way to get width: auto; transitions to work reliably is to explicitly set the width of items using Javascript. I know this defeats the purpose of using CSS transitions, but here's how I got it to work:

$(".author").each(function() {
 $(this).width( $(this).width() );
});

and then in css

.author:hover { width: 200px; !important }

EDIT: Here's a pure CSS solution for toggling between 0 and auto: CSS transition not working for percentage height?