strings.css

.plucked1 {
  -webkit-animation-name: vibrate;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 0.3;
  animation-name: vibrate;
  animation-duration: 1s;
  animation-iteration-count: 1;
}


.plucked2 {
  /* -webkit-animation-name: vibrate2; */
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 0.3;
  animation-name: vibrate;
  animation-duration: 1s;
  animation-iteration-count: 1;
  z-index: 50;
}

@keyframes vibrate {
  0% {
    transform: translate(0px,-10px);
  }

  10%{
 transform: translate(0px,9px);
  }

  20% {
    transform: translate(0px,-8px);
  }

    30%{
     transform: translate(0px,7px);
  }

    40%{
     transform: translate(0px,-6px);
  }

    50%{
     transform: translate(0px,5px);
  }

    60%{
     transform: translate(0px,-4px);
  }

    70%{
     transform: translate(0px,3px);
  }

  80% {
    transform: translate(0px,-2px);
  }


  90%{
     transform: translate(0px,1px);
  }

  100%{
     transform: translate(0px,0px);
  }

}


.plucked3 {
  height: 2px;
  z-index: 20;
  -webkit-animation-name: vibrate;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 0.3;
  animation-name: vibrate;
  animation-duration: 1s;
  animation-iteration-count: 1;
}


.plucked4 {
  height: 2px;
  z-index: 20;
  -webkit-animation-name: vibrate;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 0.3;
  animation-name: vibrate;
  animation-duration: 1s;
  animation-iteration-count: 1;
}



.string1 {
  background-image: url("data:image/gif;base64,R0lGODdhAgAIAOMQAB0aFSUfDyooKTUxJkA6Gk9EJFlPLFRRSGtnZnNpUHRvXIF3bY+Ifp6Xh7Gunby4rywAAAAAAgAIAAAEDHAERV5xpiW20BFABAA7");
  position: absolute;
  top: 30px;
  left: 45;
  width: 100%;
  height: 4px;
  z-index: 3;
  opacity: 0.6;
}

.string3 {
    background-image: url("data:image/gif;base64,R0lGODdhAgAIAOMQAB0aFSUfDyooKTUxJkA6Gk9EJFlPLFRRSGtnZnNpUHRvXIF3bY+Ifp6Xh7Gunby4rywAAAAAAgAIAAAEDHAERV5xpiW20BFABAA7");
    position: absolute;
    top: 159px;
    left: 45;
    width: 100%;
    height: 4px;
    z-index: 3;
    opacity: 0.6;
}

.string2 {
  background-image: url("data:image/gif;base64,R0lGODdhAgAIAOMQAB0aFSUfDyooKTUxJkA6Gk9EJFlPLFRRSGtnZnNpUHRvXIF3bY+Ifp6Xh7Gunby4rywAAAAAAgAIAAAEDHAERV5xpiW20BFABAA7");
  position: absolute;
  top: 94px;
  left: 45;
  width: 100%;
  height: 4px;
  z-index: 3;
  opacity: 0.6;
}

.string4 {
  background-image: url('data:image/gif;base64,R0lGODdhAgAIAOMQAB0aFSUfDyooKTUxJkA6Gk9EJFlPLFRRSGtnZnNpUHRvXIF3bY+Ifp6Xh7Gunby4rywAAAAAAgAIAAAEDHAERV5xpiW20BFABAA7');
  position: absolute;
top: 225px;
  left: 45;
  width: 100%;
  height: 4px;
  z-index: 3;
  opacity: 0.6;
}