CODEWITHSUNDEEP
htmlcss-transitionscss
Bilal Khoukhi
Bilal Khoukhi

Reputation: 1040

CSS3 Transition border-radius issue (Delayed on hover)

I am facing a problem with CSS transition, "only with border-radius"

Basically I want to animate the border, and the problem is that when I hover it takes a second before it starts to animate. I tried setting delay to 0, and it didn't work.

So is that a common problem? and if there is a solution show it to me. If not, what is another way to do that?

Here my example: Fiddle

some HTML code: 

<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>

Thank you everyone

Upvotes: 0

Views: 5557

Answers (1)

Bas van Dijk
Bas van Dijk

Reputation: 10713

The problem is the border-radius. You use:

border-radius: 50px;

You need to use half of the width of your element as the border-radius; since your element is 50px wide, use 25px or, as noted by @david-thomas, 50%.

border-radius: 50%;

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

It does not matter if you use a border radius of 100px or 1000px; if your width is 50px the result is the same. However, if you animate the radius then it will affect your animation and cause delay.

Upvotes: 5

Related Questions