I came across this nifty shake web animation on the Austin Women’s League Soccer website, that I thought I’d use it on my social icons from time to time.

As always, this effect is applied to Divi, the only theme I use.

Here is the CSS used:

@-webkit-keyframes shakeme {
 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake li a.icon.circle:hover,
.shake li a.icon.circle:focus {
 -webkit-animation-name: shakeme;
 -webkit-animation-duration: 0.8s;
 -webkit-transform-origin:50% 50%;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
}
.shake {
 display:inline-block
}

Here is the How To Video: