前端時間做項目發現一抖動按鈕挺吸引眼球的，研究了下實現原理，在此和大家分享下：
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>
最后，歡迎大家指出我的不足之處喲