csshake-crazy.css

/*! * * * * * * * * * * * * * * * * * * * *\  
  CSShake :: shake-crazy
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
.shake-crazy {
  display: inline-block;
  transform-origin: center center; }

.shake-freeze,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover {
  animation-play-state: paused; }

.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, .shake-crazy:hover,
.shake-trigger:hover .shake-crazy {
  animation-play-state: running; }

@keyframes shake-crazy {
  10% {
    transform: translate(2px, 3px) rotate(-9deg);
    opacity: 1; }
  20% {
    transform: translate(3px, 3px) rotate(-7deg);
    opacity: 0.71; }
  30% {
    transform: translate(2px, 18px) rotate(5deg);
    opacity: 0.83; }
  40% {
    transform: translate(7px, 18px) rotate(-7deg);
    opacity: 0.2; }
  50% {
    transform: translate(13px, -14px) rotate(10deg);
    opacity: 0.71; }
  60% {
    transform: translate(-14px, 20px) rotate(3deg);
    opacity: 0.42; }
  70% {
    transform: translate(-15px, 17px) rotate(5deg);
    opacity: 0.7; }
  80% {
    transform: translate(-17px, -1px) rotate(-3deg);
    opacity: 0.62; }
  90% {
    transform: translate(-4px, 2px) rotate(8deg);
    opacity: 0.15; }
  0%, 100% {
    transform: translate(0, 0) rotate(0); } }

.shake-crazy:hover,
.shake-trigger:hover .shake-crazy, .shake-crazy.shake-freeze, .shake-crazy.shake-constant {
  animation-name: shake-crazy;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }