CSS3 过渡边框半径问题（悬停时延迟）

Question

我面临 CSS 转换问题，“仅使用边框半径”

基本上我想对边框进行动画处理，问题是当我将鼠标悬停时，需要一秒钟才能开始动画处理。我尝试将延迟设置为0，但没有成功。

那么这是一个常见问题吗？如果有解决方案请告诉我。如果没有，还有什么其他方法可以做到这一点？

这是我的例子：小提琴

一些 HTML 代码：

<a href=""><span  class="icon"><p>A</p></span></a>
<a href=""><span class="icon"><p>B</p></span></a>
<a href=""> <span class="icon"><p>C</p></span></a>
<a href=""> <span class="icon"><p>D</p></span></a>

谢谢大家

Answer 1

问题是border-radius. 你用：

border-radius: 50px;

您需要使用width元素的一半作为border-radius; 由于您的元素宽 50px，请使用25px或，如 @david-thomas 所指出的，50%。

border-radius: 50%;

请参阅http://jsfiddle.net/DhQxV/1/

100px如果您使用或的边界半径并不重要1000px；如果你的宽度是50px结果是一样的。但是，如果您对半径进行动画处理，则会影响您的动画并导致延迟。