brooklyndesignstudio

Gripes Hand Shake Effect

Aug 18th, 2020 (edited)
88
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*-----------------------------------------------------*/
  2. /*------------- GRIPES HAND SHAKE EFFECT -------------*/
  3. /*-----------------------------------------------------*/
  4. .gripes-hand {
  5.   /* Start the shake animation and make the animation last for 0.5 seconds */
  6.   animation: shake 0.5s;
  7.  
  8.   /* When the animation is finished, start again */
  9.   animation-iteration-count: infinite;
  10. }
  11.  
  12. @keyframes shake {
  13.   0% { transform: translate(1px, 1px) rotate(0deg); }
  14.   10% { transform: translate(-1px, -2px) rotate(-1deg); }
  15.   20% { transform: translate(-3px, 0px) rotate(1deg); }
  16.   30% { transform: translate(3px, 2px) rotate(0deg); }
  17.   40% { transform: translate(1px, -1px) rotate(1deg); }
  18.   50% { transform: translate(-1px, 2px) rotate(-1deg); }
  19.   60% { transform: translate(-3px, 1px) rotate(0deg); }
  20.   70% { transform: translate(3px, 1px) rotate(-1deg); }
  21.   80% { transform: translate(-1px, -1px) rotate(1deg); }
  22.   90% { transform: translate(1px, 2px) rotate(0deg); }
  23.   100% { transform: translate(1px, -2px) rotate(-1deg); }
  24. }
RAW Paste Data