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
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
Was this page helpful?