CSS Transitions no quite behaving properly - css

Question

I have some navigation links that I'm using css transitions on.
Here's the 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: all 275ms;
-moz-transition: all 275ms; /* Firefox 4 */
-webkit-transition: all 275ms; /* Safari and Chrome */
-o-transition: all 275ms; /* Opera */
}
ul.yui-nav li a {
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 a span { font-size: 16px; font-weight: 400; }
And here is the HTML...
<ul class="yui-nav">
<li>Preface</li>
<li>1<br/><span>Step</span></li>
<li>2<br/><span>Step</span></li>
<li>3<br/><span>Step</span></li>
<li>4<br/><span>Step</span></li>
<li>5<br/><span>Step</span></li>
<li>Submit</li>
</ul>
And here's a JS Fiddle with this all working (Don't mind the text not looking right)...
JS Fiddle
The problem I'm having is that when you hover over the circles, during the transition the border goes from a black square to the grey circle border. I just want a grey border to come out from the circle, and I don't understand why it's not happening correctly.

Answer 1

I'm not sure if i underestand your question. The problem is the black color from start the animation? You can fix it in the next lines:
...
ul.yui-nav li {
...
border-color:#ccc;
}
...
Is this correct?

Answer 2

Add border-radius: 50%; to your ul.yui-nav li selector. This tells it it's round even though it has no border.
Demo:
ul.yui-nav li {
border-radius: 50%;
display: inline-block; 
text-align: center; 
height: 110px; 
width: 110px; 
border: none; 
background: none; 
}