.effect-rapping {
  * {
    filter: drop-shadow(0px 1px 1px white);
    position: absolute;
    z-index: 4;
  }
  .rapping-1 {
    height: 23px;
    rotate: -20deg;
    left: 14%;
    animation: effect-rapping-animation-shake 2s ease 0s  infinite forwards;
  }
  .rapping-2 {
    height: 11px;
    rotate: -9deg;
    left: 31%;
    bottom: 53%;
    animation: effect-rapping-animation-shake 2s ease 0s  infinite forwards;
  }
  .rapping-3 {    height: 21px;
    rotate: 30deg;
    left: 94%;
    bottom: 33%;
    animation: effect-rapping-animation-blink 5s 2s linear infinite;
  }
  .rapping-4 {
    height: 15px;
    rotate: 28deg;
    left: 61%;
    bottom: 72%;
    animation: effect-rapping-animation-shake 2s ease 0s  infinite forwards;
  }
  .rapping-5 {
    height: 13px;
    rotate: 19deg;
    left: 58%;
    bottom: 32%;
    animation: effect-rapping-animation-shake 2s ease 0s  infinite forwards;
  }
  .rapping-6 {    height: 21px;
    rotate: -20deg;
    left: 14%;
    bottom: 22%;
    animation: effect-rapping-animation-blink 5s 0.9s linear infinite;
  }
  .rapping-7 {
    height: 13px;
    rotate: -20deg;
    left: 45%;
    bottom: 10%;
    animation: effect-rapping-animation-shake 2s ease 0s  infinite forwards;
  }
  .rapping-8 {
    height: 14px;
    rotate: 10deg;
    left: 86%;
    animation: effect-rapping-animation-shake 2s ease 0s  infinite forwards;
  }
  .rapping-9 {    height: 21px;
    rotate: 14deg;
    left: 50%;
    bottom: 50%;
    animation: effect-rapping-animation-blink 5s 0.3s linear infinite;
  }
  .rapping-10 {
    height: 12px;
    rotate: 25deg;
    left: 87%;
    bottom: 46%;
    animation: effect-rapping-animation-shake 2s ease 0s  infinite forwards;
  }
}

@keyframes effect-rapping-animation-shake {
  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: 0 50%;
    scale: 1.2;
  }

  10% {
    transform: rotate(2deg);
  }

  20%,
  40%,
  60% {
    transform: rotate(-4deg);
  }

  30%,
  50%,
  70% {
    transform: rotate(4deg);
  }

  80% {
    transform: rotate(-2deg);
  }

  90% {
    transform: rotate(2deg);
  }
}



@keyframes effect-rapping-animation-blink{
    20%{
        scale: 1;
    }
    25%{
        scale: 1.5;
    }
    28%{
        scale: 1;
    }

     30%{
        scale: 1;
    }
    33%{
        scale:2;
    }
    35%{
        scale: 1;
    }


     75%{
        scale: 1;
    }
    78%{
        scale:3;
    }
    80%{
        scale: 1;
    }

     85%{
        scale: 1;
    }
    88%{
        scale:2;
    }
    90%{
        scale: 1;
    }
} 