Reputation: 1040
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
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