0

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に幅を指定していないためですが、指定すると、アニメーションの背景が左から開始されません。テキストの先頭で幅をアニメートしたい。

また、リンクの先頭近くにカーソルを合わせたときにのみアニメーション化されます。

4

1 に答える 1

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;
}
于 2012-12-01T18:10:29.250 に答える