解析css3 shake 抖动样式

浏览数：49 / 时间：2015年06月09日

前端时间做项目发现一抖动按钮挺吸引眼球的，研究了下实现原理，在此和大家分享下：

CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果（如下面的GIF图像）。这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。

其中有前辈为大家编写好了csshake.css ，大家可以去参考下：http://www.webhek.com/misc/css-shake

Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动，下面一起来看看介绍：

使用教程

首先引入css shake的样式表文件。

<link type="text/css" href="csshake.css">

给你的DOM元素添加shake class样式

<div class="shake"></div>

添加抖动样式，一共9种，也可以看DEMO对应添加即可

<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 来控制状态，具体自己试下哦！

接下来是我自己编写的一个鼠标放上停止抖动的小实验：
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>shake study</title>
        <style type="text/css">
        .box{width: 200px;height: 100px;background-color: #ccc;margin:30px auto;}
        .shake{
            -webkit-animation-name: shake_box;
            -ms-animation-name: shake_box;
            animation-name: shake_box;
            -webkit-animation-duration: 100ms;
            -ms-animation-duration: 100ms;
            animation-duration: 100ms;
            -webkit-animation-timing-function: ease-in-out;
            -ms-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-delay: 0s;
            -ms-animation-delay: 0s;
            animation-delay: 0s;
            /*-webkit-animation-play-state: running;
            -ms-animation-play-state: running;
            animation-play-state: running;*/
        }
        .shake:hover{
            -webkit-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            /*-webkit-animation-play-state: paused;
            -ms-animation-play-state: paused;
            animation-play-state: paused;*/
        }
        @keyframes shake_box{
            0% {transform: translate(0px, 0px) rotate(0deg)}
            20% {transform: translate(1.5px, -2.5px) rotate(-1.5deg)}
            40% {transform: translate(-2.5px, 0.5px) rotate(-0.5deg)}
        }
        @-ms-keyframes shake_box{
            0% {-ms-transform: translate(0px, 0px) rotate(0deg)}
            20% {-ms-transform: translate(1.5px, -2.5px) rotate(-1.5deg)}
            40% {transform: translate(-2.5px, 0.5px) rotate(-0.5deg)}
        }
        </style>
    </head>
    <body>
        <div class="box shake"></div>
    </body>
</html>

最后，欢迎大家指出我的不足之处哟