@keyframes wobble {
  from,
  to {
    transform:translate3d(0,0,0)
  }
  5% {
    transform:translate3d(-25%,0,0) rotate3d(0,0,1,-15deg);
  }
  10% {
    transform:translate3d(20%,0,0) rotate3d(0,0,1,25deg);
    fill: $green-009;
  }
  15% {
    transform:translate3d(-15%,0,0) rotate3d(0,0,1,-10deg);
    fill: $green-009;
  }
  20%,
  80% {
    transform:translate3d(0,0,0) rotate3d(0,0,1,0deg);
    fill: $green-007;
  }
  85% {
    transform:translate3d(10%,0,0) rotate3d(0,0,1,5deg);
    fill: $green-007;
  }
  90% {
    transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
    fill: $green-007;
  }
}

@keyframes vibration {
  0%   { transform: rotate(0deg) translateX(0) scale(1); }
  15%  { transform: rotate(3deg) translateX(1px) scale(1.01); }
  30%  { transform: rotate(-3deg) translateX(-1px); }
  45%  { transform: rotate(2.5deg) translateX(1px) scale(1.01); }
  60%  { transform: rotate(-2.5deg) translateX(-1px); }
  75%  { transform: rotate(2deg) translateX(1px); }
  90%  { transform: rotate(-2deg) translateX(-1px); }
  100% { transform: rotate(0deg) translateX(0) scale(1); }
}

.wobble-animation {
  -webkit-animation-name: wobble;
  -moz-animation-name: wobble;
  -o-animation-name: wobble;
  animation-name: wobble;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}

.vibration-animation {
  animation: vibration 0.45s infinite ease-in-out;
}