Привет, я пытаюсь анимировать width
span
внутри a
этого 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>
здесь находится 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;
}
Как вы можете видеть, я пытаюсь оживить width
, но вместо постепенного роста span
появляется только без transition
.
Чтобы вы могли выяснить, что я пытаюсь проверить nav
этого сайта
: http://kitkat.com/
Я сделал скрипку своего собственного nav
: http://jsfiddle.net/ZUhsn/, где проблема выходит.
Надеюсь, я дал вам всю информацию, чтобы попытаться решить мою проблему. Приветствия.