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: 50px; 

由於您的元素的寬度是你需要使用的half與爲半徑爲50像素25像素或由@大衛 - 托馬斯用50％指出。

border-radius: 50%; 

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

，如果你使用的100像素或1000像素的邊界半徑，如果你的寬度是50像素的結果是一樣的沒關係。但是，如果您爲半徑設置動畫，則會影響您的動畫並導致延遲。