Главная > CSS, Javascript > CSS тряска

CSS тряска

@keyframes trambling-animation{
	0%,50%,100%{
		transform:rotate(0deg);
	}
	10%,30%{
		transform:rotate(-10deg);
	}
	20%,40%{
		transform:rotate(10deg);
	}
}
.trambling{
	animation:1.2s ease-in-out 0s normal none infinite running trambling-animation;
}

LESS с поддержкой старых браузеров

.transform(@transform){
	-moz-transform:@transform;
	-ms-transform:@transform;
	-webkit-transform:@transform;
	-o-transform:@transform;
	transform:@transform;
}
.animation(@animation){
	-webkit-animation:@animation;
	-moz-animation:@animation;
	-o-animation:@animation;
	animation:@animation;
}
@keyframes trambling-animation{
	0%,50%,100%{
		.transform(rotate(0deg));
	}
	10%,30%{
		.transform(rotate(-10deg));
	}
	20%,40%{
		.transform(rotate(10deg));
	}
}
.trambling{
	.animation(1.2s ease-in-out 0s normal none infinite running trambling-animation);
}

Или используйте jquery плагин jRumble:
https://jackrugile.com/jrumble/

Categories: CSS, Javascript Tags:
  1. Пока что нет комментариев.
Похожие публикации