Question

I am having a small problem with css transitions.

I am trying to make the background width animate on hover, and it does work however it is a bit jumpy.

My css code is

ul {
    list-style:none;
    margin: 0;
    padding:0;
}
ul li {
    margin-bottom: 8px;
    color:#999;  
}
ul li:hover  {
    color: #FFF;
    background-color: #f6634c;
    width: 200px;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}

The demo can be seen here http://codepen.io/anon/pen/IFbds

The reason it is jumpy is because I have not specified a width on the li, but if I do, the animating background will not start from the left. I want the width to animate at the start of the text.

Also it only animates when you hover near the start of the link.

Answer 1

Like this?

ul {
    list-style:none;
    margin: 0;
    padding:0;
    overflow:hidden; /*to clear the floats*/
}
ul li {
    margin-bottom: 8px;
    color:#999;  
    min-width:0px; /*the property we are going to animate, set to specific value*/
    float:left; /*prevent display block from filling up all available width*/
    clear:left; /*prevent float left from putting blocks in-line*/
    display:block;/*cause width to be interpreted my way*/
}
ul li:hover  {
    color: #FFF;
    background-color: #f6634c;
    min-width: 200px; /*BOOM*/
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}