@keyframes animation-1 {
    0% {
      margin-top: 0;
    }

    100% {
      margin-top: 40px;
    }
  }

  @keyframes animation-2 {
    0% {
      margin-bottom: 0;
    }

    100% {
      margin-bottom: 10px;
    }
  }
  @keyframes animation-3 {
    0% {
      transform: scale(1);
      margin-left: 0;
    }

    100% {
      transform: scale(1.3);
      margin-left: 100px;
    }
  }

  @keyframes animation-4 {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(30px);
    }
  }

  @keyframes animation-5 {
    0% {
      transform: scale(1);
    }

    100% {
      transform: scale(1.1)
    }
  }

  .aniamtion-key-1 {
    position: relative;
    animation-name: animation-2;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  .aniamtion-key-2 {
    position: relative;
    animation-name: animation-2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  .aniamtion-key-3 {
    position: relative;
    animation-name: animation-3;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  .aniamtion-key-4 {
    position: relative;
    animation-name: animation-4;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  .aniamtion-key-5 {
    position: relative;
    animation-name: animation-5;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }