html结构：
css样式：
.dd {
animation: shake 1s;-o-animation: shake 1s;
-webkit-animation: shake 1s;
-moz-animation: shake 1s;
}
@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(5px);
}
}
@-o-keyframes shake {
/* Opera */
0%, 100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(5px);
}
}
@-webkit-keyframes shake {
/* Safari 和 Chrome */
0%, 100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(5px);
}
}
@-moz-keyframes shake {
/* Firefox */
0%, 100% {
-moz-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-moz-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-moz-transform: translateX(5px);
}
}
js效果：
效果：
鼠标经过home图标时，图标会左右晃动。