Передо мной стоит задача сделать на сайте увеличивающийся круг. Точнее сказать, необходимо, чтобы на странице появлялась картинка с помощью анимации круга. Т.е. если бы я это делал на flash, то на нижний слой поместил бы картинку, а на верхний слой маску круга, и увеличивал бы этот круг. Таким образом получалось бы, что картинка становится видимой путем увеличения области круга, сквозь которую эту картинку видно.
Идея была такова: делаю див с закругленными углами, т.е. круг. В качестве его бекграунда помещаю картинку. Затем с помощью анимации увеличиваю круг, тем самым как бы делая фон все более и более видимым, по мере увеличения круга. Реализовал это спомощью jQuery, все получилось замечательно
test.ru.2139.vps.agava.net/spectr/index.php за тем исключением, что в некоторых браузерах фон немного дергается в процессе анимации. Решение такое
jsfiddle.net/battrack/2L98G
Затем мне подсказали, как это сделать с помощью чистого CSS, и получилось вот что
jsfiddle.net/battrack/LZ4TM/4.
Но проблема в том, что если на фон этого круга поместить изображение, то оно увеличивается вместе с кругом, что неприемлемо. И как сделать, чтобы круг не пульсировал? Т.е. чтобы увеличился и замер?
Простой
