$animation-time: 3s;

.animated {
  .hmm {
    #hand {
      animation-name: handWithHammerAnimation;
      animation-duration: $animation-time;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      transform-origin: 7840px 4708px;
    }

    #hand_2 {
      animation-name: hand2Animation;
      animation-duration: $animation-time;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      transform-origin: 7036px 4860px;
    }

    #sparks {
      animation-name: sparksAnimation;
      animation-duration: $animation-time;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      opacity: 0;
    }

    #all {
      animation-name: shakingAnimation;
      animation-duration: $animation-time;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
  }
}

@keyframes handWithHammerAnimation {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(90deg);
  }
  32% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes hand2Animation {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(140deg);
  }
  32% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes sparksAnimation {
  0% {
    opacity: 0;
  }
  31% {
    opacity: 0;
  }
  32% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes shakingAnimation {
  0% {
    transform: translateY(0px);
  }
  32% {
    transform: translateY(0px);
  }
  35% {
    transform: translateY(100px);
  }
  38% {
    transform: translateY(-50px);
  }
  40% {
    transform: translateY(25px);
  }
  42% {
    transform: translateY(-17px);
  }
  43% {
    transform: translateY(9px);
  }
  44% {
    transform: translateY(-5px);
  }
  45% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}
