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

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

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

1 个答案: