Home > DeveloperSection > Forums > CSS width transition not working at all
marcel ethan
marcel ethan

Total Post:105

Points:735
Posted on    September-25-2013 7:45 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 1364  View(s)
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;

}



Pravesh Singh

Total Post:411

Points:2881
Posted on    September-25-2013 9:50 AM

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

}


Don't want to miss updates? Please click the below button!

Follow MindStick