JSFiddle - React, Tailwind, and code Playground

by c_vilander

HTML

<img src="https://images.clasohlson.com/SE/2016christmas/kampanjsida/etikett_kocken.png?v=1.8" />

CSS

img:hover { 
  animation: shake 1.7s ease-in-out;
}

@keyframes shake {
    10% { transform: rotate(5deg); }
    20% { transform: rotate(-5deg); }
    30% { transform: rotate(2.5deg); }
    40% { transform: rotate(-2.5deg); }
    50% { transform: rotate(1.5deg); }
    60% { transform: rotate(-1.5deg); }
    70% { transform: rotate(0.5deg); }
    80% { transform: rotate(-0.5deg); }
    90% { transform: rotate(0.2deg); }
    100% { transform: rotate(0deg); }
}