Wiggle on hover code
by akshatha suchethan
HTML
<a href="#" class="wiggle-me">Wiggle On Hover</a>
CSS
@-ms-keyframes wiggle {
0% {
-ms-transform: rotate(3deg);
}
50% {
-ms-transform: rotate(-3deg);
}
100% {
-ms-transform: rotate(3deg);
}
}
@-moz-keyframes wiggle {
0% {
-moz-transform: rotate(3deg);
}
50% {
-moz-transform: rotate(-3deg);
}
100% {
-moz-transform: rotate(3deg);
}
}
@-webkit-keyframes wiggle {
0% {
-webkit-transform: rotate(3deg);
}
50% {
-webkit-transform: rotate(-3deg);
}
100% {
-webkit-transform: rotate(3deg);
}
}
@keyframes wiggle {
0% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
100% {
transform: rotate(3deg);
}
}
a.wiggle-me {
float: left;
padding: 30px;
background: yellow;
}
a.wiggle-me:hover {
-ms-animation: wiggle .3s 2;
-moz-animation: wiggle .3s 2;
-webkit-animation: wiggle .3s 2;
animation: wiggle .3s 2;
}