It's possible to have the animation done entirely with very simple CSS and JS. The strategy involves two things:
transition: all 500ms;— This bit of CSS means that anytime we want to do a transition (i.e., animation), that transition will complete in500ms.transform(rotate)— Then every CSS change takes place in 500ms, so, we can shake the icon withmargin-leftandmargin-right, or, we can usetransform(rotate), let's try the latter!
Note: You can use any type of CSS effect here, try experimenting with something else! I'm curious if there's anything better than transform(rotate).
Demo
const wiggletime = 100;function rotateElement(el) { el.classList.add('rotateable'); el.style.transform = 'rotate(20deg)'; setTimeout(function() { el.style.transform = 'rotate(-20deg)'; setTimeout(function() { el.style.transform = 'rotate(0deg)'; }, wiggletime); }, wiggletime); return true;}function squishElement(el) { el.classList.add('rotateable'); el.style.transform = 'scaleX(1.5)'; setTimeout(function() { el.style.transform = 'scaleX(0.5)'; setTimeout(function() { el.style.transform = 'scaleX(1)'; }, wiggletime); }, wiggletime); return true;}function shakeElement(el) { el.classList.add('rotateable'); el.style.marginLeft = '20px'; setTimeout(function() { el.style.marginLeft = '-20px'; setTimeout(function() { el.style.marginLeft = '0px'; }, wiggletime); }, wiggletime); return true;}function skewElement(el) { el.classList.add('rotateable'); el.style.transform = 'skewX(20deg)'; setTimeout(function() { el.style.transform = 'skewX(-20deg)'; setTimeout(function() { el.style.transform = 'skewX(0deg)'; }, wiggletime); }, wiggletime); return true;}function borderElement(el) { el.classList.add('rotateable'); el.style.border = '4px solid black'; el.style.marginLeft = '-4px'; el.style.marginTop = '-4px'; setTimeout(function() { el.style.border = '2px solid black'; el.style.marginLeft = '-2px'; el.style.marginTop = '-2px'; setTimeout(function() { el.style.border = '1px solid black'; el.style.marginLeft = '0px'; el.style.marginTop = '0px'; }, wiggletime); }, wiggletime); return true;}document.getElementById('rotate-me').addEventListener('click', function(ev) { rotateElement(this);});document.getElementById('shake-me').addEventListener('click', function(ev) { shakeElement(this);});document.getElementById('squish-me').addEventListener('click', function(ev) { squishElement(this);});document.getElementById('skew-me').addEventListener('click', function(ev) { skewElement(this);});document.getElementById('border-me').addEventListener('click', function(ev) { borderElement(this);});.rotateable { transition: all 100ms;}<button id="shake-me">Shake Me!</button><br><br><button id="rotate-me">Rotate Me!</button><br><br><button id="squish-me">Squish Me!</button><br><br><button id="skew-me">Skew Me!</button><br><br><button id="border-me" style="position:absolute;">Border Me!</button>Demo - Extended
Why not extended animations?
const wiggletime = 100;function rotateElement(el) { el.classList.add('rotateable'); el.style.transform = 'rotate(20deg)'; setTimeout(function() { el.style.transform = 'rotate(-20deg)'; setTimeout(function() { el.style.transform = 'rotate(10deg)'; setTimeout(function() { el.style.transform = 'rotate(-10deg)'; setTimeout(function() { el.style.transform = 'rotate(0deg)'; }, wiggletime); }, wiggletime); }, wiggletime); }, wiggletime); return true;}function squishElement(el) { el.classList.add('rotateable'); el.style.transform = 'scaleX(1.5)'; setTimeout(function() { el.style.transform = 'scaleX(0.5)'; setTimeout(function() { el.style.transform = 'scaleX(1.25)'; setTimeout(function() { el.style.transform = 'scaleX(0.75)'; setTimeout(function() { el.style.transform = 'scaleX(1)'; }, wiggletime); }, wiggletime); }, wiggletime); }, wiggletime); return true;}function skewElement(el) { el.classList.add('rotateable'); el.style.transform = 'skewX(20deg)'; setTimeout(function() { el.style.transform = 'skewX(-20deg)'; setTimeout(function() { el.style.transform = 'skewX(10deg)'; setTimeout(function() { el.style.transform = 'skewX(-10deg)'; setTimeout(function() { el.style.transform = 'skewX(0deg)'; }, wiggletime); }, wiggletime); }, wiggletime); }, wiggletime); return true;}function shakeElement(el) { el.classList.add('rotateable'); el.style.marginLeft = '20px'; setTimeout(function() { el.style.marginLeft = '-20px'; setTimeout(function() { el.style.marginLeft = '10px'; setTimeout(function() { el.style.marginLeft = '-10px'; setTimeout(function() { el.style.marginLeft = '0px'; }, wiggletime); }, wiggletime); }, wiggletime); }, wiggletime); return true;}document.getElementById('rotate-me').addEventListener('click', function(ev) { rotateElement(this);});document.getElementById('shake-me').addEventListener('click', function(ev) { shakeElement(this);});document.getElementById('squish-me').addEventListener('click', function(ev) { squishElement(this);});document.getElementById('skew-me').addEventListener('click', function(ev) { skewElement(this);});.rotateable { transition: all 100ms;}<button id="shake-me">Shake Me!</button><br><br><button id="rotate-me">Rotate Me!</button><br><br><button id="squish-me">Squish Me!</button><br><br><button id="skew-me">Skew Me!</button>