24 февраля 2012, 16:05

CSS3: анимация на примере вращения картинки вокруг своей оси :)

ЦСС3 крутая вещь, круче не придумать ;)
анимировать будем при наведении мыши на картинку
@keyframes rotate{ 
	/* создаем анимацию и даем ей имя (rotate например) */
	/* дальше задаем положение в начале и в конце */
	from { 
		/* 
			для анимации используем трансформацию вращение 
			есть ешё сдвиг translate(x,y) и увеличение scale(z)
		*/
		transform:  rotate(0);
		/* можно анимировать размеры и прочие парамтры цсс */
	}	
	to {
		transform: rotate(360deg);
	}

	/* или вместо from|to пишем процент выполнения сцены, от 0% до 100%, любой нужный */
	/* 
		так как поддерживают анимацию передовики Гекко и ВебКит, 
		запись выше не работает и каждому нужно написать свою
	*/


} 
@-moz-keyframes rotate{from {-moz-transform:  rotate(0);}	to {-moz-transform: rotate(360deg);}} 

@-webkit-keyframes rotate{from {-webkit-transform:  rotate(0);}	to {-webkit-transform: rotate(360deg);}} 
	

img {
	padding-right: 13px;
}
img:hover {
	/* анимировать будем при наведении мыши на картинку */
	border: 1px solid #C0C0C0;
	/* имя анимации, длительность, продолжительность циклов, "задержки" */
	animation: rotate 0.5s infinite linear; 
	-moz-animation: rotate 0.5s infinite linear;
	-webkit-animation: rotate 0.5s infinite linear;
	/* 
	
	-webkit-animation-name —  имя анимации
	-webkit-animation-duration — время проигрывания анимации
	-webkit-animation-timing-function — метод расчета промежуточных значений свойств для анимации
	-webkit-animation-delay — задержка анимации
	-webkit-animation-iteration-count — количество циклов анимации
	-webkit-animation-direction — направление анимации
	-webkit-animation-play-state — проигрывается ли анимация или стоит на паузе

	*/}


11 комментариев РСС

Andrew Gurylyov
Ах вот как оно делается! Мне всего-лишь linear не хватало для равномерного кручения на моём сайте gurylyov.ru сорри за ссылку, просто давно там крутится, никак не мог понять, как сделать, чтоб крутилось равномерно. Спасибо!
Антон
А как сделать, чтобы оборот был только 1 раз?
Vitaliy Bogdanets
http://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp
вместо инфинит пишешь количество n (тебе нужно поставить 1)
Allx
Спасибо. Идеально решение и без лишних заморочек. Спасибо автор!
Dahazard
Ребят а как сделать чтобы анимация картинки производилась после нажатия кнопки?И чтобы она останавливалась после опять же той нажатой кнопки?
Vitaliy Bogdanets
создай класс .active (вместо img:hover) и вешай с помощью javascript (jquery) в нужный момент этот класс на элемент
Dahazard
Вот код кнопки на которую нужно повесить: [code] <a id=«Player$id»
class=«iplay»
data-player=«http://сайт.ru/files/000.mp3»
data-title=«$title»
data-reads=«http://сайт.ru/download.php?id=$id»
data-id=«$id»
data-idn=«play{news-id}»>
</a>
[/code]
помогите правильно прикрепить пожалуйста..я в js вообще 0
Vitaliy Bogdanets
Dahazard
Пример вижу..но как в мой код его запихать..не пойму
Dahazard
Виталий, напишите мне пожалуйста в icq 574849 или скайп tyntygydyn
Виктор Анциков
Огромное спасибо.
Dahazard
Vitaliy Bogdanets, в общем так и не смог сделать..делал всё как вы сказали http://jsfiddle.net/JAXr4/ со смартфона нажимаю на картинку он проворачивается на 360 градусов один раз и всё..но не крутится пока активна..хотя стоит active и активно..может что не так делаю?на ПК с оперы вообще не работает...только со смартфона со стандартного браузера
Dahazard
Сейчас сделал..крутится, но крутится только тогда когда нажмёшь курсором мышки на картинку и держишь так не отпуская,если отпустишь то перестаёт крутится..почему так?делал всё как тут http://jsfiddle.net/JAXr4/
owner
Выложите ваш код на тот же ресурс

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter