.key {
    display: inline-block;
    transition: transform 0.2s;
  }
  
  
  
  @keyframes pressDown1 {
    30%,
    40%,
    100% {
      transform: translateY(0);
    }
    35% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown2 {
    70%,
    80%,
    100% {
      transform: translateY(0);
    }
    75% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown3 {
    30%,
    40%,
    100% {
      transform: translateY(0);
    }
    35% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown4 {
    40%,
    50%,
    100% {
      transform: translateY(0);
    }
    45% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown5 {
    20%,
    30%,
    100% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown6 {
    60%,
    70%,
    100% {
      transform: translateY(0);
    }
    65% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown7 {
    10%,
    20%,
    100% {
      transform: translateY(0);
    }
    15% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown8 {
    35%,
    45%,
    100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown9 {
    20%,
    30%,
    100% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown10 {
    60%,
    70%,
    100% {
      transform: translateY(0);
    }
    65% {
      transform: translateY(10px);
    }
  }
  
  @keyframes pressDown11 {
    35%,
    45%,
    100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(10px);
    }
  }
  
  
  @keyframes pressDown12 {
    60%,
    70%,
    100% {
      transform: translateY(0);
    }
    65% {
      transform: translateY(10px);
    }
  }
  
  
  .key:nth-child(1) {
    animation: pressDown1 2s infinite;
  }
  
  .key:nth-child(2) {
    animation: pressDown2 3s infinite;
  }
  
  .key:nth-child(3) {
    animation: pressDown3 4s infinite;
  }
  
  .key:nth-child(4) {
    animation: pressDown4 2.5s infinite;
  }
  
  .key:nth-child(5) {
    animation: pressDown5 2.5s infinite;
  }
  
  .key:nth-child(6) {
    animation: pressDown6 3.5s infinite;
  }
  
  .key:nth-child(7) {
    animation: pressDown7 2.2s infinite;
  }
  
  .key:nth-child(8) {
    animation: pressDown8 3.2s infinite;
  }
  
  .key:nth-child(9) {
    animation: pressDown8 2.5s infinite;
  }
  
  .key:nth-child(10) {
    animation: pressDown8 3.0s infinite;
  }
  
  .key:nth-child(11) {
    animation: pressDown8 2.2s infinite;
  }
  
  .key:nth-child(12) {
    animation: pressDown8 2.5s infinite;
  }