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; 

Поскольку ширина вашего элемента 50px вам нужно использовать half из с таким радиусом, который 25px или как отмечает @ DAVID-томас использования 50%.

border-radius: 50%; 

См http://jsfiddle.net/DhQxV/1/

Это не имеет значения, если вы используете радиус границы в 100px или 1000px, если ваша ширина 50px результат тот же. Однако, если вы анималируете радиус, это повлияет на вашу анимацию и вызовет задержку.