CSS3过渡边界半径问题(悬停时延迟)

Question

我面临CSS转换的问题，"只有边界半径"

基本上，我想设置边界的动画，问题是当我悬停时，它需要一秒钟才能开始设置动画。我尝试将延迟设置为0，但没有成功。

那么这是一个常见的问题吗？如果有解决方案，就给我看看。如果没有，还有什么方法可以做到这一点？

这里是我的例子：Fiddle

一些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，或者如@davidthomas所述，使用50%。

border-radius: 50%;

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

使用100px或1000px的边界半径并不重要；如果您的宽度是50px，则结果是相同的。但是，如果设置半径的动画，则会影响动画并导致延迟。