Html CSS宽度转换根本不起作用

您好，我正在尝试设置

导航
中
a
内
span
的
width
的动画

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

正如您所看到的，我正在尝试设置
宽度的动画，但是，
span
不是逐渐增长，而是在没有任何
转换的情况下显示。
为了让您了解我试图获得的效果，请查看此站点的
nav
:

我自己做了一把小提琴
nav
：问题出在哪里

希望我给了你所有的信息来解决我的问题。
干杯。
试试这个：

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*/
}


两个问题：

首先，默认情况下，span是一个内联元素，因此它的宽度与您预期的不同。通过应用
display:block，我们将其转换为具有宽度的块级元素

其次，您正在转换为宽度值
'auto'
。变换只能在数值之间进行动画处理，因此您必须使用单位来测量结束变换。
只需将
宽度：100%
更改为
悬停时的
span
：

header nav ul li a:hover span{
    width : 100%;
    overflow: visible;
    text-align: right;
}

检查此项
以下是您提供的信息的快速重现：

    <style>
    .navigator
    {
        position: absolute;
        left: 200px;
        border:1px solid black;
    }

    .navigator span
    {
        position: absolute;
        -moz-transition: 0.5s;
        opacity: 0;
        right: 0px;
        z-index: -1;
    }

    .navigator a
    {
        text-decoration: none;
        color: black;
    }

    .navigator a:hover span
    {
        right: 100%;
        opacity: 1;
        -moz-transition: 0.5s;
    }
</style>

<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="Portfolio" 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>


.领航员
{
位置：绝对位置；
左：200px；
边框：1px纯黑；
}
.导航跨度
{
位置：绝对位置；
-moz转变：0.5s；
不透明度：0；
右：0px；
z指数：-1；
}
.领航员a
{
文字装饰：无；
颜色：黑色；
}
.导航器a：悬停范围
{
右：100%；
不透明度：1；
-moz转变：0.5s；
}













而且它的工作非常完美…
如果你的宽度不是问题，请将跨度宽度从“自动”更改为固定大小。是的，我看到在固定宽度下它可以工作，但是如何使其与
auto
width一起工作？@steo，你为什么需要
auto
width？
100%
会给你想要的效果吗？
    <style>
    .navigator
    {
        position: absolute;
        left: 200px;
        border:1px solid black;
    }

    .navigator span
    {
        position: absolute;
        -moz-transition: 0.5s;
        opacity: 0;
        right: 0px;
        z-index: -1;
    }

    .navigator a
    {
        text-decoration: none;
        color: black;
    }

    .navigator a:hover span
    {
        right: 100%;
        opacity: 1;
        -moz-transition: 0.5s;
    }
</style>

<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="Portfolio" 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>