.animated {
  .mouse {
    #mouse_head {
      animation-name: mouse_head_animation;
      animation-duration: 10s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      transform-origin: 5277px 3349px;
    }

    #mouse_eyes {
      animation-name: eyes_animation;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      transform-origin: 4416px 2951px;
    }

    #mouse_pupil_1,
    #mouse_pupil_2 {
      animation-name: pupil_animation;
      animation-duration: 10s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
  }
}

@keyframes mouse_head_animation {
  0% {
    rotate: 0deg;
  }
  58% {
    rotate: 0deg;
  }
  60% {
    rotate: 30deg;
  }
  80% {
    rotate: 30deg;
  }
  82% {
    rotate: 0deg;
  }
  100% {
    rotate: 0deg;
  }
}

@keyframes eyes_animation {
  0% {
    scale: 1 1;
  }
  10% {
    scale: 1 1;
  }
  15% {
    scale: 1 0;
  }
  20% {
    scale: 1 1;
  }

  100% {
    scale: 1 1;
  }
}

@keyframes pupil_animation {
  0% {
    translate: 0px 0;
  }
  28% {
    translate: 0px 0;
  }
  30% {
    translate: 200px 0;
  }
  40% {
    translate: 200px 0;
  }
  42% {
    translate: 0px 0;
  }
  100% {
    translate: 0px 0;
  }
}
