Css3: animation jitter and css3 animation Jitter

Css3: animation jitter and css3 animation Jitter

Html structure:

<Div class = "top">
<A href = "#">
<Div>

</Div>
</A>
<A href = "index.html">
<Div style = "border-top: 1px solid # f7efd5; border-bottom: 1px solid # f7efd5;">

</Div>
</A>
<A>
<Div>

</Div>
</A>
</Div>

Css style:

. Dd {

Animation: shake 1 s;
-O-animation: shake 1 s;
-Webkit-animation: shake 1 s;
-Moz-animation: shake 1 s;
}
@ 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 and 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 effect:

<Script type = "text/javascript">
$ ("# Dd"). mouseenter (function (){
$ (This). addClass ("dd ");
});
$ ("# Dd"). mouseleave (function (){
$ (This). removeClass ("dd ");
});
</Script>

Effect:

When you move the cursor over the home icon, the icon will shake left and right.