La transition de largeur CSS ne fonctionne pas du tout

Salut, je suis en train d'animer le width de la span à l'intérieur de la a de cette nav

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

ici, c'est la 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;
}

Comme vous pouvez le voir je suis en train d'animer le widthmais, au lieu de cultiver progressivement la span est seulement de les montrer sans transition.
Pour vous permettre de comprendre l'effet que j'essaie de faire vérifier le nav de ce site
:http://kitkat.com/

J'ai fait du violon de mon propre nav:http://jsfiddle.net/ZUhsn/ où le problème vient.

Espère que je vous ai donné toutes les informations pour essayer de résoudre mon problème.
Des acclamations.

source d'informationauteur steo

  1. 22

    Essayez ceci:

    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/

    Deux questions:

    Tout d'abord, la durée est un élément inline par défaut, afin de ne pas avoir une largeur comme vous le souhaitez. En appliquant display:block;nous l'avons transformé en un bloc élément de niveau avec la largeur.

    Deuxièmement, vous avez été la transition vers une valeur de largeur de 'auto'. Les Transitions ne peuvent s'anime à travers des valeurs numériques, de sorte que vous aurez à donner votre fin de transition d'une mesure avec les unités.

  2. 2

    Il suffit de changer width : 100% à votre span sur hover : 

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

    Cochez cette JSFiddle

  3. 0

    Voici un rapide de loisirs de l'information que vous avez fournie: 

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

    Et son travail tout à fait à la perfection...