Image animation : from a circle to a rectangle. (with corner.js)

I'm using the corner.js script by Dave Methvin. It allows me to add rounded corners on any block element.

The purpose is to create rounded thumbnails of images that would grow up into their fullsized squared format when clicked on.

Here is a demo of what i mean. You can check the source code, t开发者_StackOverflow中文版he JS is at the bottom.

I can't seem to be able to animate the radius of the corners. They just go from one state to the other. I would like them to do it smoothly over time.

Any help is very welcome :)

The way corner.js works is by adding a whole bunch of extra elements to the corners of your blocks. I would seriously doubt whether it would be possible to animate it nicely.

You could of course, just use CSS border-radius for rounded corners. This is the standards-compliant way of doing it, and would be extremely easy to animate, just by changing the value of the CSS property.

The down-side is that border-radius isn't supported in IE8 or lower, but fortunately there is a hack called CSS3Pie, which adds support for border-radius (and other features) in CSS for IE, allowing you to use standard CSS for this in all browsers.

Using CSS3Pie for this should also make it possible to animate it; I know it does have support for dynamically changing the style, though I have to confess I haven't actually ever tried it, as I've never had a need to animate my rounded corners.

Hope that helps.