Jitter Animation CSS

jitter.css

/*
 * Jitter Animation CSS by Steven Swor
 * (https://gist.github.com/sworisbreathing/5599b41654c8d0692366) is licensed
 * under a Creative Commons Attribution-ShareAlike 4.0 International License. To
 * view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.
 *
 * Based on a work at http://www.kingdomofloathing.com/ with permission from
 * Asymmetric Publications, LLC (http://asymmetric.net/).
 */

/*
 * Usage:
 *   To add jitter animations, simply reference this CSS file and add either the
 *   "jitter-forward" or "jitter-reverse" class to any HTML element.
*/

.jitter-forward {
  animation-name: jitter;
  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: none;
  animation-iteration-count: infinite;
  animation-play-state: paused;

  animation-direction: forward;
  animation-play-state: running;
}
.jitter-reverse {
  animation-name: jitter;
  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: none;
  animation-iteration-count: infinite;
  animation-play-state: paused;

  animation-direction: reverse;
  animation-play-state: running;
}
@keyframes jitter {
  0% {
    transform: skew(0deg) translate(0px, 0px);
  }
  17% {
    transform: skew(0.5deg) translate(-1px, 0px);
  }
  32% {
    transform: skew(0.5deg) translate(0px, 0px);
  }
  48% {
    transform: skew(0deg) translate(0px, 0px);
  }
  63% {
    transform: skew(-0.5deg) translate(1px, 0px);
  }
  79% {
    transform: skew(-0.5deg) translate(0px, 0px);
  }
  100% {
    transform: skew(0deg) translate(0px, 0px);
  }
}