forum

Home / DeveloperSection / Forums / CSS width transition not working at all

Ask Question

CSS width transition not working at all

marcel ethan 2920 25-Sep-2013

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;

}

css-css3 css-css3 
Updated on 25-Sep-2013
marcel ethan

marcel ethan

Follow

Can you answer this question?

Answer

1 Answers

Pravesh Singh

Pravesh Singh

25-Sep-2013
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*/
}

Liked By