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

Question

我遇到了CSS过渡的问题，“只有border-radius”

基本上我想要为边框设置动画，问题是当我悬停时它需要一秒钟才能开始制作动画。我尝试将延迟设置为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: 50px;

由于你的元素的宽度是50px，你需要使用with的half作为半径25px或@ david-thomas指出使用50％。

border-radius: 50%;

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

如果宽度为50px，则使用100px或1000px的边框半径无关紧要，结果相同。但是，如果为半径设置动画，则会影响动画并导致延迟。