Как сделать увеличивающийся круг на CSS или jQuery?

Question

[Дмитрий]

Столкнулся с такой проблемой. Необходимо реализовать анимацию круга. Т.е. сделать увеличивающийся круг. Пробовал сделать это так:
есть круг

.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 в виде круга, и на его бекграунд поместить картинку. Див увеличивался бы, тем самым делая видимой картинку.

Answer 1

[Юрий Лобанов]

Вот фиддл jsfiddle.net/iiil/qfv9x
Только он без префиксов, думаю, что сами допишите.

Answer 2

[Роман Павлов]

Немного не по теме, но всегда пишите css-свойство без префикса последним. Всегда.

.circle{
	 -moz-border-radius:50px;
	 -webkit-border-radius:50px;
	 -khtml-border-radius:50px;
	 border-radius:50px;	 
}

Comments

[Владимир Говенчик]

khtml - 0.001% kde пользователей поддерживаете?

Answer 3

[Yuri Morozov]

Это от браузера зависит? у меня все норм, вот фиддл: jsfiddle.net/7Nv6y

Comments

[Владимир Шишминцев]

скорей всего от машины зависит, на слабой виртуалке тоже квадрат видно

[Дмитрий]

Попробовал в хроме, действительно все нормально. А вот в мозиле анимация начинается с квадрата.

Answer 4

[TekVanDo]

Зачем вы меняли свойство border-radius? jsfiddle.net/7Nv6y/1

Comments

[Дмитрий]

Надо же, ваш вариант работает. Но почему при установленном изначально бордере в 150 пикс, все нормально? Ведь круг то сначала размером 100 на 100, а бордер сразу 150 получается.

Answer 5

[Александр Петров]

border-radius: 50% и убрать его из animation({}), как вариант.

Answer 6

[Сергей Протько]

jsfiddle.net/phUTa

Comments

[Дмитрий]

А как запустить? Жму run, но ничего не происходит, просто серый статичный круг.

[Сергей Протько]

А какой у вас браузер?

p.s. я просто добавьте префиксы под нужные браузеры.

[Дмитрий]

ааа, точно! В chrome заработало! А в IE версиях ниже 10 это будет работать?
Буду изучать keyframes, а то мне ваш код пока не понятен.
Я не понимаю почему анимация зацикливается и не останавливается.

[Дмитрий]

Помогите пожалуйста довести до ума! Вот ваш вариант с добавленными префиксами для браузеров jsfiddle.net/battrack/LZ4TM/4
Но в опере работать не хочет. И как сделать чтобы не циклилось. Т.е. чтобы круг увеличился и остановился.