css - 如何使背景宽度在悬停时平滑动画

Question

我在 css 转换方面遇到了一个小问题。

我试图让背景宽度在悬停时动画，它确实有效，但它有点跳动。

我的CSS代码是

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;
}

该演示可以在这里看到http://codepen.io/anon/pen/IFbds

它跳动的原因是因为我没有在 li 上指定宽度，但是如果我这样做了，动画背景将不会从左侧开始。我希望宽度在文本的开头设置动画。

此外，它仅在您将鼠标悬停在链接开头附近时才会显示动画。

Answer 1

像这样？

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;
}