Animation: Enlarge circle (div) with CSS - how to do it?

Question

css

My task is to make an increasing circle on the site. More precisely, it is necessary that an image appear on the page using a circle animation. Those. if I did it on flash, then I would put a picture on the bottom layer, and a circle mask on the top layer, and enlarge this circle. Thus, it would turn out that the picture becomes visible by increasing the area of ​​the circle through which this picture is visible.

The idea was this: I make divs with rounded corners, i.e. a circle. As a background, I put a picture. Then I use animation to make the circle bigger, making the background more and more visible as the circle gets bigger. Implemented this using jQuery, everything turned out great test.ru.2139.vps.agava.net/spectr/index.phpwith the exception that in some browsers the background twitches a bit during the animation. The solution is jsfiddle.net/battrack/2L98G

Then I was told how to do it with pure CSS and it turned out to be jsfiddle.net/battrack/LZ4TM/4 .

But the problem is that if an image is placed on the background of this circle, then it increases along with the circle, which is unacceptable. And how to make the circle not pulsate? Those. to grow and freeze?

Answer 1

jsfiddle.net/iiil/fgCmb/2 there are
a lot of options.

Answer 2

as an option - place the image not inside the circle, but on the background of the circle.

Answer 3

I'm not entirely sure, but why don't you nest the div from your first choice in a div with a fixed (final) width*height?

Answer 4

Nothing new. Just dabbled in jsfiddle.net/C9X2S/2/