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 ； 因为你的元素是50像素宽，使用25px或由@大卫-托马斯，指出50%

border-radius: 50%;

见http://jsfiddle.net/DhQxV/1/

使用100px或1000px的边框半径都没有关系； 如果您的宽度是50px ，结果是一样的。 但是，如果您为半径设置动画，则会影响您的动画并导致延迟。