CSS WIDTH TRANSITION NOT WORKING AT ALL

marcel ethan

Total Post:105

Points:735
Posted by  marcel ethan
 1700  View(s)
Ratings:
Rate this:

Hi I'm trying to animate the width of the span inside the a of this 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>

here it is the 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;

}

  1. Pravesh Singh

    Post:412

    Points:2888
    Re: CSS width transition not working at all

    Hi Marcel,

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

    }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!