.animated {
  #banknotes-container {
    animation-name: banknotes_animation;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transform-origin: center center;

    #money {
      animation-name: buy_army_money_animation;
      animation-duration: 3s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      transform-origin: center center;

      #note_1,
      #note_2 {
        animation-name: note_animation;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }

      #note_1 {
        animation-delay: -0.5s;
      }
    }

    #circle-background {
      animation-name: circle_animation;
      animation-duration: 0.7s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      transform-origin: center center;
    }
  }
}

@keyframes banknotes_animation {
  0% {
    opacity: 0;
    scale: 1;
  }
  10% {
    opacity: 1;
    scale: 1;
  }
  90% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 1;
    scale: 0;
  }
}

@keyframes buy_army_money_animation {
  0% {
    rotate: -10deg;
  }
  100% {
    rotate: 10deg;
  }
}

@keyframes note_animation {
  100% {
    translate: 0 200px;
  }
}

@keyframes circle_animation {
  100% {
    scale: 0.9;
  }
}
