css - CSS Transitions表现不正常

我有一些使用CSS转换的导航链接。

这是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; }

这是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>

这是所有工作的JS小提琴（不要介意文字看起来不正确）...
JS Fiddle

我遇到的问题是，当您将鼠标悬停在圆圈上时，过渡期间边框会从黑色正方形变为灰色圆圈边界。我只是想从圆圈中看到一个灰色的边框，而且我不明白为什么它不能正确发生。

最佳答案

我不确定我是否理解你的问题。问题是开始播放动画时是黑色的吗？您可以在接下来的几行中对其进行修复：

...

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

...

它是否正确？