按钮抖动效果

HTML部分：

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

CSS部分：

.shake {
	width:150px;
	height:30px;
	background:yellowgreen;
	-webkit-animation:shake-slow 1s linear;
	animation:shake-slow 1s linear infinite;
}
@-webkit-keyframes shake-slow {
	2% {
	-webkit-transform:translate(-4px,2px) rotate(1.5deg);
	transform:translate(-4px,2px) rotate(1.5deg)
}
4% {
	-webkit-transform:translate(-8px,10px) rotate(-1.5deg);
	transform:translate(-8px,10px) rotate(-1.5deg)
}
6% {
	-webkit-transform:translate(2px,-6px) rotate(-.5deg);
	transform:translate(2px,-6px) rotate(-.5deg)
}
8% {
	-webkit-transform:translate(10px,10px) rotate(-1.5deg);
	transform:translate(10px,10px) rotate(-1.5deg)
}
10% {
	-webkit-transform:translate(8px,4px) rotate(.5deg);
	transform:translate(8px,4px) rotate(.5deg)
}
12% {
	-webkit-transform:translate(2px,6px) rotate(-.5deg);
	transform:translate(2px,6px) rotate(-.5deg)
}
14% {
	-webkit-transform:translate(10px,-8px) rotate(.5deg);
	transform:translate(10px,-8px) rotate(.5deg)
}
16% {
	-webkit-transform:translate(-9px,-5px) rotate(3.5deg);
	transform:translate(-9px,-5px) rotate(3.5deg)
}
18% {
	-webkit-transform:translate(9px,-9px) rotate(-1.5deg);
	transform:translate(9px,-9px) rotate(-1.5deg)
}
20% {
	-webkit-transform:translate(2px,1px) rotate(1.5deg);
	transform:translate(2px,1px) rotate(1.5deg)
}
22% {
	-webkit-transform:translate(-4px,1px) rotate(2.5deg);
	transform:translate(-4px,1px) rotate(2.5deg)
}
24% {
	-webkit-transform:translate(-7px,4px) rotate(-1.5deg);
	transform:translate(-7px,4px) rotate(-1.5deg)
}
26% {
	-webkit-transform:translate(-6px,-1px) rotate(-2.5deg);
	transform:translate(-6px,-1px) rotate(-2.5deg)
}
28% {
	-webkit-transform:translate(6px) rotate(-1.5deg);
	transform:translate(6px) rotate(-1.5deg)
}
30% {
	-webkit-transform:translate(-6px,6px) rotate(3.5deg);
	transform:translate(-6px,6px) rotate(3.5deg)
}
32% {
	-webkit-transform:translate(5px,7px) rotate(3.5deg);
	transform:translate(5px,7px) rotate(3.5deg)
}
34% {
	-webkit-transform:translate(-5px,5px) rotate(3.5deg);
	transform:translate(-5px,5px) rotate(3.5deg)
}
36% {
	-webkit-transform:translate(-8px,-3px) rotate(-2.5deg);
	transform:translate(-8px,-3px) rotate(-2.5deg)
}
38% {
	-webkit-transform:translate(-3px,5px) rotate(-2.5deg);
	transform:translate(-3px,5px) rotate(-2.5deg)
}
40% {
	-webkit-transform:translate(8px,-4px) rotate(1.5deg);
	transform:translate(8px,-4px) rotate(1.5deg)
}
42% {
	-webkit-transform:translate(2px,-8px) rotate(2.5deg);
	transform:translate(2px,-8px) rotate(2.5deg)
}
44% {
	-webkit-transform:translate(5px,-7px) rotate(-1.5deg);
	transform:translate(5px,-7px) rotate(-1.5deg)
}
46% {
	-webkit-transform:translate(8px,-4px) rotate(1.5deg);
	transform:translate(8px,-4px) rotate(1.5deg)
}
48% {
	-webkit-transform:translate(1px,-4px) rotate(.5deg);
	transform:translate(1px,-4px) rotate(.5deg)
}
50% {
	-webkit-transform:translate(-7px,7px) rotate(3.5deg);
	transform:translate(-7px,7px) rotate(3.5deg)
}
52% {
	-webkit-transform:translate(7px,-5px) rotate(3.5deg);
	transform:translate(7px,-5px) rotate(3.5deg)
}
54% {
	-webkit-transform:translate(10px,-5px) rotate(1.5deg);
	transform:translate(10px,-5px) rotate(1.5deg)
}
56% {
	-webkit-transform:translate(-1px,-8px) rotate(1.5deg);
	transform:translate(-1px,-8px) rotate(1.5deg)
}
58% {
	-webkit-transform:translate(2px,-2px) rotate(-1.5deg);
	transform:translate(2px,-2px) rotate(-1.5deg)
}
60% {
	-webkit-transform:translate(-8px) rotate(2.5deg);
	transform:translate(-8px) rotate(2.5deg)
}
62% {
	-webkit-transform:translate(9px,-5px) rotate(-2.5deg);
	transform:translate(9px,-5px) rotate(-2.5deg)
}
64% {
	-webkit-transform:translate(8px,-9px) rotate(.5deg);
	transform:translate(8px,-9px) rotate(.5deg)
}
66% {
	-webkit-transform:translate(-6px,-7px) rotate(-2.5deg);
	transform:translate(-6px,-7px) rotate(-2.5deg)
}
68% {
	-webkit-transform:translate(-1px,-4px) rotate(-1.5deg);
	transform:translate(-1px,-4px) rotate(-1.5deg)
}
70% {
	-webkit-transform:translate(10px,-8px) rotate(-1.5deg);
	transform:translate(10px,-8px) rotate(-1.5deg)
}
72% {
	-webkit-transform:translate(3px,6px) rotate(-2.5deg);
	transform:translate(3px,6px) rotate(-2.5deg)
}
74% {
	-webkit-transform:translate(-1px,8px) rotate(-.5deg);
	transform:translate(-1px,8px) rotate(-.5deg)
}
76% {
	-webkit-transform:translate(-3px,7px) rotate(1.5deg);
	transform:translate(-3px,7px) rotate(1.5deg)
}
78% {
	-webkit-transform:translate(9px) rotate(2.5deg);
	transform:translate(9px) rotate(2.5deg)
}
80% {
	-webkit-transform:translate(9px,-5px) rotate(3.5deg);
	transform:translate(9px,-5px) rotate(3.5deg)
}
82% {
	-webkit-transform:translate(9px,8px) rotate(-.5deg);
	transform:translate(9px,8px) rotate(-.5deg)
}
84% {
	-webkit-transform:translate(-3px,-3px) rotate(-2.5deg);
	transform:translate(-3px,-3px) rotate(-2.5deg)
}
86% {
	-webkit-transform:translate(-8px,-1px) rotate(3.5deg);
	transform:translate(-8px,-1px) rotate(3.5deg)
}
88% {
	-webkit-transform:translate(5px,2px) rotate(3.5deg);
	transform:translate(5px,2px) rotate(3.5deg)
}
90% {
	-webkit-transform:translate(5px,9px) rotate(-.5deg);
	transform:translate(5px,9px) rotate(-.5deg)
}
92% {
	-webkit-transform:translate(7px,5px) rotate(1.5deg);
	transform:translate(7px,5px) rotate(1.5deg)
}
94% {
	-webkit-transform:translate(8px,8px) rotate(-.5deg);
	transform:translate(8px,8px) rotate(-.5deg)
}
96% {
	-webkit-transform:translate(2px,10px) rotate(-2.5deg);
	transform:translate(2px,10px) rotate(-2.5deg)
}
98% {
	-webkit-transform:translate(-5px,10px) rotate(-2.5deg);
	transform:translate(-5px,10px) rotate(-2.5deg)
}
0%,to {
	-webkit-transform:translate(0) rotate(0);
	transform:translate(0) rotate(0)
}
}