css3 - CSS Transitions no quite behaving properly -

css3 - CSS Transitions no quite behaving properly -

i have navigation links i'm using css transitions on.

here's css...

ul.yui-nav { list-style-type: none; } ul.yui-nav li { display: inline-block; text-align: center; height: 110px; width: 110px; border: none; background: none; } ul.yui-nav li:hover { background: none; border: 1px solid #ccc; border-radius: 50%; height: 110px; width: 110px; transition: 275ms; -moz-transition: 275ms; /* firefox 4 */ -webkit-transition: 275ms; /* safari , chrome */ -o-transition: 275ms; /* opera */ } ul.yui-nav li { font-style: normal; border-radius: 50%; height: 100px; width: 100px; background: #ccc; float: left; color: #fff; text-decoration: none; font-size: 50px; font-family: 'oswald', sans-serif; margin: 0 11px; font-weight: 700; margin: 5px 5px; } ul.yui-nav li span { font-size: 16px; font-weight: 400; }

and here html...

<ul class="yui-nav"> <li><a href="#preface">preface</a></li> <li><a href="#step1">1<br/><span>step</span></a></li> <li><a href="#step2">2<br/><span>step</span></a></li> <li><a href="#step3">3<br/><span>step</span></a></li> <li><a href="#step4">4<br/><span>step</span></a></li> <li><a href="#step5">5<br/><span>step</span></a></li> <li><a href="#submit">submit</a></li> </ul>

and here's js fiddle working (don't mind text not looking right)... js fiddle

the problem i'm having when hover on circles, during transition border goes black square gray circle border. want gray border come out circle, , don't understand why it's not happening correctly.

i'm not sure if underestand question. problem black color start animation? can prepare in next lines:

... ul.yui-nav li { ... border-color:#ccc; } ...

is correct?

css css3 css-transitions