CSS WIDTH TRANSITION NOT WORKING AT ALL

marcel ethan

Total Post:104

Points:728
Posted by  marcel ethan
 1916  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*/
    }

      Modified On Mar-31-2018 01:59:50 AM

Answer

NEWSLETTER

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