CSS Shake – 让你的页面晃起来！

CSS Shake是一组简易的CSS规则，它利用CSS3所提供的动画，来使DOM元素能够振动或晃动起来。

如何使用

CSS Shake提供了大量已调配好的规则，要使用它们只需为相应的DOM元素增加相应的类即可：

如果还想玩一些定制，那么CSS Shake还提供了Sass代码，允许你调用其所提供的Sass mixin：

@include shake($x, $y, $rot, $name, $steps, $opacity); /* _mixins.scss */ 
/* 	$x & $y: pixels to move on the X and Y axis,
	$rot: deg to rotate
	$name: the name assigned to those parameters
	$steps: adjust the animation loop (i.e 10 makes an animation in steps of 10%)
	$opacity: true/false to add opacity animation */
@include shake(40px, 40px, 20deg, 'shake-crazy', 10, true); /* an example */

@include animation($name, $dur, $iter, $tim, $del); /* _shake.scss */
/*  $name: animation-name,
	$dur: animation-duration,
	$iter: animation-iteration-count,
	$tim: animation-timing-function,
	$del: animation-delay */
@include animation(shake-slow, 5s); /* an example */

许可证

CSS Shake使用的是MIT协议。