_shake.scss

// reset
$duration:100ms;
$base-name:shake-base;
$iteration:infinite;
$timing:ease-in-out;
$delay:0s;
$state:running;


// The animation
@mixin animation($name, $dur: $duration, $iter: $iteration, $tim: $timing, $del: $delay, $sta: $state){
	@include vendorize(animation-name, $name, webkit ms spec);
	@include vendorize(animation-duration, $dur, webkit ms spec);
	@include vendorize(animation-iteration-count, $iter, webkit ms spec);
	@include vendorize(animation-timing-function, $tim, webkit ms spec);
	@include vendorize(animation-delay, $del, webkit ms spec);
	@include vendorize(animation-play-state, $sta, webkit ms spec);
}


.shake {
	display: inline-block;
	@include vendorize(transform-origin, center center, webkit ms spec);
	
	&:hover {
		@include animation($base-name);
	}
	
	&.freez {
		&.shake-hard { @include animation(shake-hard); }
		&.shake-slow { @include animation(shake-slow, 5s); }
		&.shake-little { @include animation(shake-little); }
		&.shake-horizontal { @include animation(shake-horizontal); }
		&.shake-vertical { @include animation(shake-vertical); }
		&.shake-rotate { @include animation(shake-rotate); }
		&.shake-opacity { @include animation(shake-opacity, 200ms); }
		&.shake-crazy { @include animation(shake-crazy); }
		@include vendorize(animation-play-state, paused!important, webkit ms spec);
		&:hover {
			@include vendorize(animation-play-state, running!important, webkit ms spec);
		}
	}
	
	// Specific shakings
	&.shake-hard:hover { @include animation(shake-hard); }
	&.shake-slow:hover { @include animation(shake-slow, 5s); }
	&.shake-little:hover { @include animation(shake-little); }
	&.shake-horizontal:hover { @include animation(shake-horizontal); }
	&.shake-vertical:hover { @include animation(shake-vertical); }
	&.shake-rotate:hover { @include animation(shake-rotate); }
	&.shake-opacity:hover { @include animation(shake-opacity, 200ms); }
	&.shake-crazy:hover { @include animation(shake-crazy); }

	&.shake-constant { 
		@include animation($base-name);
		&.shake-hard { @include animation(shake-hard); }
		&.shake-slow { @include animation(shake-slow, 5s); }
		&.shake-little { @include animation(shake-little); }
		&.shake-horizontal { @include animation(shake-horizontal); }
		&.shake-vertical { @include animation(shake-vertical); }
		&.shake-rotate { @include animation(shake-rotate); }
		&.shake-opacity { @include animation(shake-opacity, 200ms); }
		&.shake-crazy { @include animation(shake-crazy); }
		&.hover-stop:hover{
			@include vendorize(animation-play-state, paused, webkit ms spec);
		}
	}
	&.shake-delay { @include animation($base-name, $duration, $iteration, $timing, 4s); }

}


// The animations: its names and settings to call from animation mixin
@include shake(5px, 5px, 3deg, 'shake-base', 2);
@include shake(2px, 2px, 1deg, 'shake-little', 2);
@include shake(20px, 20px, 7deg, 'shake-slow', 2);
@include shake(20px, 20px, 7deg, 'shake-hard', 2);
@include shake(20px, 0px, 0deg, 'shake-horizontal', 2);
@include shake(0px, 20px, 0deg, 'shake-vertical', 2);
@include shake(0px, 0px, 15deg, 'shake-rotate', 2);
@include shake(10px, 10px, 5deg, 'shake-opacity', 10, true);
@include shake(40px, 40px, 20deg, 'shake-crazy', 10, true);