Связаться
+79263772075
info@el-komp.ru

Blog

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

CSS3 крутая вещь, круче не придумать 😉
анимировать будем при наведении мыши на картинку

@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 — проигрывается ли анимация или стоит на паузе

	*/}
Пример

 

Спасибо: https://deer.org.ua/2012/02/24/1/

Leave a comment

Ваш адрес email не будет опубликован.

9 + девять =

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Top Яндекс.Метрика