CSS transition behaving weirdly
I'm trying to animate
border-radius but I found that it doesn't behave like expected. Even though the transition seems to work in the devtools (I can see the border-radius changing values), the UI seems to start the animation with a weird delay (which doesn't go away even after setting transition-delay: 0s;). Does anyone have an idea why this behavior happens? Here's a JSFiddle[object Object] - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
4 Replies
have you tried to convert this to an animation?
yeah, there is something funky going on
it's only noticeable with long transition length
i know what it happening
it is going from 10rem to 0.5rem
1rem = 16px, usually
so, it is going from 160px to 8px
and the height is 100px
so, since 160 > 100/2 it makes round corners
you wont see any difference until it reaches 49px
set the radius to 50px and it will be fine
why 50px? and not 100px?
well, split the element into 4 quadrants - you control each quadrant individually
and since it has 100px of height, you need 50px of border radius
tl;dr: takes time to transition from 160px to 8px for an element with 100px height
That's still noticeable, especially when the transition is a cubic-bezier
Wow ok, that makes sense, I'll try that!
That works perfectly, thanks a bunch! 😄