html – CSS宽度转换根本不工作

嗨,我正在努力在这个导航的一个范围内的动画宽度

<nav class="navigator">
   <ul>
    <li><a href="#home">H<span>home</span></a></li>
    <li><a title="What?" href="#what">W<span>what</span></a></li>
    <li><a title="Porfolio" href="#works">P<span>works</span></a></li>
    <li><a title="Who?" href="#who">W<span>who</span></a></li>
    <li><a title="Where?" href="#where">W<span>where</span></a></li>
  </ul>
</nav>

这里是CSS

header nav ul li a{
    position: relative;
    width: 40px;
    display: block;
    text-decoration: none;
    font-size: 18px;
    color: #000;
}
header nav ul li a:hover span{
    width: auto;
    overflow: visible;
    text-align: right;
}
header nav ul li a span{
    position: absolute;
    width: 0;
    right: 45px;
    overflow: hidden;
    transition:width 0.25s;
    -webkit-transition:width .25s;
    -moz-transition: width 0.25s;
    font-size: 16px;
}

正如你可以看到,我正在努力制作宽度,但是,不是逐渐增长,而是跨越,而不是没有任何转变.
让你弄清楚我想要查看这个网站的导航的效果
：http://kitkat.com/

我做了一个自己的导航的小提琴：http://jsfiddle.net/ZUhsn/问题出来了.

希望我给你所有的信息,试图解决我的问题.
干杯.

解决方法

尝试这个：

header nav ul li a:hover{}
header nav ul li a:hover span{
    width: 100%; /* YOU'LL NEED TO ADJUST THIS,IT CANNOT BE AUTO*/
    overflow: visible;
    text-align: right;
}

header nav ul li a span{
    position: absolute;
    width: 0;
    right: 45px;
    overflow: hidden;
    transition:width 0.25s;
    -webkit-transition:width .25s;
    -moz-transition: width 0.25s;
    font-size: 16px;
    display:block; /*HERE IS MY OTHER CHANGE*/
}

http://jsfiddle.net/ZUhsn/4/

两个问题：

首先,默认情况下,span是一个内联元素,因此它没有您期望的宽度.通过应用display：block,我们把它变成具有width的块级元素.

其次,您正在转换为宽度值“auto”.转换只能跨数值生成动画,所以您必须使用单位给您的结束转换.