Столкнулся с такой проблемой. Необходимо реализовать анимацию круга. Т.е. сделать увеличивающийся круг. Пробовал сделать это так:
есть круг
.circle{
width:100px;
height:100px;
display:block;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
-khtml-border-radius:50px;
}
с помощью animation на jQuery изменяю соответствующие свойства:
$('#circle').animate(
{
height: '300px',
width: '300px',
borderRadius: '150px',
},
10000);
но получается полная ерунда, т.к. по ходу анимации круг превращается в квадрат и уже из квадрата переходит в круг.
Вопрос: как же все-таки анимировать изменение размера круга? Возможно ли это сделать на чистом CSS?
Вообще задача стоит такая: предполагалось, что на странице будет появляться картинка с помощью анимации круга. Т.е. если бы я это делал на flash, то на нижний слой поместил бы картинку, а на верхний слой маску круга и увеличивал бы этот круг. Таким образом получалось бы что картинка становится видимой путем увеличения области круга, сквозь которую эту картинку видно.
Вот я и думал, сделать div в виде круга, и на его бекграунд поместить картинку. Див увеличивался бы, тем самым делая видимой картинку.
Простой
