CSS width transition not working at all

Question

Try this:

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/

Two issues:

Firstly, span is an inline element by default, so it doesn’t have a width like you would expect. By applying display:block;, we turn it into a block-level element with width.

Secondly, you were transitioning to a width value of 'auto'. Transitions can only animate across numerical values, so you’ll have to give your ending transition a measurement with units.

Leave a Comment Cancel reply