style.css

body {
  text-align: center;
  font-family: helvetica;
}

svg {
  width: 30%;
}

.base, .glass, .snow, .arm, .nose{
  stroke:#231f20;
  stroke-width:4px;
}

.base, .glass, .snow, .arm, .nose, .flake{
  stroke-miterlimit:10;
}

.base{fill:#303030;}
.glass{fill:#d0ebea;}
.snow,.flake{fill:#fff;}
.nose{fill:#ea9c22;}
.arm{fill:none;}



/* Shake effect */
@-webkit-keyframes classname {
  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
  
  10% { -webkit-transform: translate(-1px, -2px) rotate(-5deg); }
  
  20% { -webkit-transform: translate(-3px, 0px) rotate(5deg); }
  
  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(5deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(-5deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -webkit-transform: translate(2px, 1px) rotate(-5deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(5deg); }
  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(-5deg); }
}

classname:hover {
  -webkit-animation-name: shake;
  -webkit-animation-duration: 1s;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}


classname:hover classname { 
  -webkit-animation-name: shake;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
}