CSS3 实现简单的跳动效果，上图演示，鼠标指上去可以看到效果，废话不多说，直接贴代码：



	html 


<a href=""><img class="tiaodan" src="" /></a>

	css 

.tiaodan:hover { -webkit-animation-name: tiaodan-slow; -ms-animation-name: tiaodan-slow; animation-name: tiaodan-slow; -webkit-animation-duration: 5s; -ms-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -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 text-align:center
}
 
@-webkit-keyframes tiaodan-slow {
0%{-webkit-transform:translate(0,0) rotate(0)}
2%{-webkit-transform:translate(-1px,3px) rotate(1.5deg)}
4%{-webkit-transform:translate(2.3px,0) rotate(-.5deg)}
6%{-webkit-transform:translate(3px,3px) rotate(-3.5deg)}
8%{-webkit-transform:translate(-2.3px,-2px) rotate(-1.5deg)}
10%{-webkit-transform:translate(3px,0) rotate(-2.5deg)}
12%{-webkit-transform:translate(-2.3px,-2px) rotate(-3.5deg)}
14%{-webkit-transform:translate(3px,2.3px) rotate(2.5deg)}
16%{-webkit-transform:translate(3px,-3px) rotate(-1.5deg)}
18%{-webkit-transform:translate(2.3px,-2.3px) rotate(-3.5deg)}
20%{-webkit-transform:translate(2px,1px) rotate(-.5deg)}
22%{-webkit-transform:translate(2.3px,3px) rotate(-2.5deg)}
24%{-webkit-transform:translate(-3px,-1px) rotate(2.5deg)}
26%{-webkit-transform:translate(2.3px,-2.3px) rotate(.5deg)}
28%{-webkit-transform:translate(2.3px,-2.3px) rotate(-3.5deg)}
30%{-webkit-transform:translate(-1.3px,-2.3px) rotate(-1.5deg)}
32%{-webkit-transform:translate(-1px,0) rotate(2.5deg)}
34%{-webkit-transform:translate(2.3px,1.3px) rotate(-.5deg)}
36%{-webkit-transform:translate(1.3px,2.3px) rotate(1.5deg)}
38%{-webkit-transform:translate(1.3px,-2.3px) rotate(1.5deg)}
40%{-webkit-transform:translate(-3px,-1px) rotate(-.5deg)}
42%{-webkit-transform:translate(-3px,1.3px) rotate(-.5deg)}
44%{-webkit-transform:translate(-2.3px,2px) rotate(.5deg)}
46%{-webkit-transform:translate(-2.3px,-1.3px) rotate(-.5deg)}
48%{-webkit-transform:translate(1px,2.3px) rotate(1.5deg)}
50%{-webkit-transform:translate(2.3px,2.3px) rotate(1.5deg)}
52%{-webkit-transform:translate(-3px,2.3px) rotate(.5deg)}
54%{-webkit-transform:translate(2.3px,-3px) rotate(-2.5deg)}
56%{-webkit-transform:translate(1.3px,-2.3px) rotate(-2.5deg)}
58%{-webkit-transform:translate(-1.3px,-2.3px) rotate(.5deg)}
60%{-webkit-transform:translate(1.3px,2.3px) rotate(-.5deg)}
62%{-webkit-transform:translate(0,0) rotate(-1.5deg)}
64%{-webkit-transform:translate(-2.3px,-2.3px) rotate(-3.5deg)}
66%{-webkit-transform:translate(2.3px,-2.3px) rotate(.5deg)}
68%{-webkit-transform:translate(0,-2.3px) rotate(-2.5deg)}
70%{-webkit-transform:translate(-2.3px,1px) rotate(1.5deg)}
72%{-webkit-transform:translate(-2.3px,2.3px) rotate(2.5deg)}
74%{-webkit-transform:translate(1.3px,-2.3px) rotate(-.5deg)}
76%{-webkit-transform:translate(3px,1px) rotate(-.5deg)}
78%{-webkit-transform:translate(-1px,3px) rotate(2.5deg)}
80%{-webkit-transform:translate(2px,2.3px) rotate(2.5deg)}
82%{-webkit-transform:translate(-2.3px,-2.3px) rotate(-.5deg)}
84%{-webkit-transform:translate(-3px,3px) rotate(-2.5deg)}
86%{-webkit-transform:translate(3px,2px) rotate(-2.5deg)}
88%{-webkit-transform:translate(-3px,2px) rotate(-1.5deg)}
90%{-webkit-transform:translate(-2.3px,-2.3px) rotate(-3.5deg)}
92%{-webkit-transform:translate(-3px,2.3px) rotate(2.5deg)}
94%{-webkit-transform:translate(-2.3px,-2.3px) rotate(-3.5deg)}
96%{-webkit-transform:translate(-2px,1.3px) rotate(-3.5deg)}
98%{-webkit-transform:translate(1.3px,1px) rotate(-.5deg)}
}

@-ms-keyframes tiaodan-slow{
0%{-ms-transform:translate(0,0) rotate(0)}
2%{-ms-transform:translate(-2.3px,1px) rotate(-1.5deg)}
4%{-ms-transform:translate(-2.3px,-1px) rotate(-3.5deg)}
6%{-ms-transform:translate(2.3px,1.3px) rotate(-1.5deg)}
8%{-ms-transform:translate(-2px,-2.3px) rotate(-1.5deg)}
10%{-ms-transform:translate(-2.3px,-2px) rotate(-.5deg)}
12%{-ms-transform:translate(-3px,2.3px) rotate(-2.5deg)}
14%{-ms-transform:translate(2.3px,3px) rotate(-1.5deg)}
16%{-ms-transform:translate(1.3px,1.3px) rotate(1.5deg)}
18%{-ms-transform:translate(3px,-1.3px) rotate(-3.5deg)}
20%{-ms-transform:translate(-2.3px,2px) rotate(-3.5deg)}
22%{-ms-transform:translate(3px,-2.3px) rotate(-1.5deg)}
24%{-ms-transform:translate(-1px,-2.3px) rotate(2.5deg)}
26%{-ms-transform:translate(2.3px,2.3px) rotate(-.5deg)}
28%{-ms-transform:translate(2.3px,-2.3px) rotate(-3.5deg)}
30%{-ms-transform:translate(2.3px,-2.3px) rotate(-.5deg)}
32%{-ms-transform:translate(2.3px,1.3px) rotate(1.5deg)}
34%{-ms-transform:translate(2px,-2.3px) rotate(2.5deg)}
36%{-ms-transform:translate(-2.3px,-2.3px) rotate(2.5deg)}
38%{-ms-transform:translate(-3px,-2.3px) rotate(.5deg)}
40%{-ms-transform:translate(2.3px,2.3px) rotate(-2.5deg)}
42%{-ms-transform:translate(3px,-3px) rotate(.5deg)}
44%{-ms-transform:translate(3px,3px) rotate(-3.5deg)}
46%{-ms-transform:translate(-1.3px,2.3px) rotate(1.5deg)}
48%{-ms-transform:translate(-2.3px,-3px) rotate(-2.5deg)}
50%{-ms-transform:translate(3px,-1px) rotate(-3.5deg)}
52%{-ms-transform:translate(-3px,-2.3px) rotate(2.5deg)}
54%{-ms-transform:translate(2.3px,0) rotate(2.5deg)}
56%{-ms-transform:translate(-3px,-1px) rotate(-.5deg)}
58%{-ms-transform:translate(0,-2.3px) rotate(-3.5deg)}
60%{-ms-transform:translate(-2.3px,1.3px) rotate(2.5deg)}
62%{-ms-transform:translate(2.3px,3px) rotate(.5deg)}
64%{-ms-transform:translate(-2.3px,-2.3px) rotate(-1.5deg)}
66%{-ms-transform:translate(-1px,-2.3px) rotate(-.5deg)}
68%{-ms-transform:translate(-2.3px,-2.3px) rotate(-2.5deg)}
70%{-ms-transform:translate(-2.3px,-3px) rotate(-1.5deg)}
72%{-ms-transform:translate(-1.3px,-2px) rotate(-2.5deg)}
74%{-ms-transform:translate(-3px,1px) rotate(-.5deg)}
76%{-ms-transform:translate(-2.3px,2.3px) rotate(2.5deg)}
78%{-ms-transform:translate(2.3px,1.3px) rotate(-3.5deg)}
80%{-ms-transform:translate(-2.3px,-2.3px) rotate(-.5deg)}
82%{-ms-transform:translate(1.3px,-2.3px) rotate(1.5deg)}
84%{-ms-transform:translate(2px,3px) rotate(1.5deg)}
86%{-ms-transform:translate(3px,1.3px) rotate(2.5deg)}
88%{-ms-transform:translate(-3px,-1px) rotate(-1.5deg)}
90%{-ms-transform:translate(-1px,-2.3px) rotate(1.5deg)}
92%{-ms-transform:translate(3px,-2.3px) rotate(-3.5deg)}
94%{-ms-transform:translate(2.3px,-2.3px) rotate(-2.5deg)}
96%{-ms-transform:translate(2.3px,-3px) rotate(2.5deg)}
98%{-ms-transform:translate(3px,0) rotate(-3.5deg)}
}

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