程序喵CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果（如下面的GIF图像）。这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。这个Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动，一起来玩一下吧。
使用方法
要使用csshake，首先要将csshake.css文件引入你的html文件的<head>中。
<head> <link rel="stylesheet" type="text/css" href="csshake.css"> </head>
然后你就可以使用下面的方法是DOM元素抖动起来：
<div class="shake"></div> <div class="shake shake-hard"></div> <div class="shake shake-slow"></div> <div class="shake shake-little"></div> <div class="shake shake-horizontal"></div> <div class="shake shake.vertical"></div> <div class="shake shake-rotate"></div> <div class="shake shake-opacity"></div> <div class="shake shake-crazy"></div>
你可以通过 .freeze 、 .shake-constant 和 .hover-stop 来控制抖动动画的状态。
定制
你可以通过SASS @mixins 来创建新的抖动动画。
编辑_mixins.scss文件：
@include shake($x, $y, $rot, $name, $steps, $opacity);
$x和$y是在x或y轴上移动的像素。$rot是旋转的角度。$name是参数中元素的名字。$steps可以调整动画的循环次数（例如：设置为10可以是动画每次完成10%）。$opacity表示是否给动画添加透明度。
下面是一个例子：
@include shake(40px, 40px, 20deg, 'shake-crazy', 10, true);
编辑_shake.scss文件：
@include animation($name, $dur, $iter, $tim, $del);
$name ：animation-name。
$dur ：animation-duration。
$iter ：animation-iteration-count。
$tim ：animation-timing-function。
$del ：animation-delay。
下面是一个例子：
@include animation(shake-slow, 5s);
注意：你必须使用random()函数来编译SASS文件。
你可以在下面三篇文章中获得更多这方面的信息：
更多关于csshake的资料请参考：https://github.com/daneden/animate.css
官方地址：http://elrumordelaluz.github.io/csshake/#1
未经允许请勿转载：程序喵 » csshake.css强大的CSS3元素抖动动画库