.effect-speaking {
  * {
    position: absolute;
    z-index: 4;
  }
  .speaking-1 {
    height: 13px;
    rotate: 2deg;
    left: 1%;
    bottom: 58%;
    animation: effect-speaking-animation 2s 2.5s linear infinite;
  }
  .speaking-2 {
    height: 11px;
    rotate: 14deg;
    left: 9%;
    bottom: 68%;
    animation: effect-speaking-animation 2s 1.5s linear infinite;
  }
  .speaking-3 {
    height: 11px;
    rotate: 45deg;
    left: 25%;
    bottom: 82%;
    animation: effect-speaking-animation 2s 2s linear infinite;
  }
  .speaking-4 {
    height: 15px;
    rotate: 60deg;
    left: 41%;
    bottom: 86%;
    animation: effect-speaking-animation 2s 1s linear infinite;
  }
  .speaking-5 {
   height: 13px;
    rotate: 88deg;
    left: 62%;
    bottom: 81%;
    animation: effect-speaking-animation 2s 0.5s linear infinite;
  }
  .speaking-6 {
    height: 13px;
    rotate: -236deg;
   left: 80%;
    bottom: 69%;
    animation: effect-speaking-animation 2s 0.9s linear infinite;
  }
  .speaking-7 {
    height: 13px;
    rotate: -221deg;
  left: 86%;
    bottom: 53%;
    animation: effect-speaking-animation 2s 0.5s linear infinite;
  }
  .speaking-8 {
    height: 14px;
    rotate: -204deg;
  left: 89%;
    animation: effect-speaking-animation 2s 0s linear infinite;
    bottom: 33%;
  }
  .speaking-9 {
    height: 10px; 
   rotate: -217deg;
    left: 87%;
    bottom: 42%;
    animation: effect-speaking-animation 2s 0.3s linear infinite;
  }
  .speaking-10 {
    height: 12px;
    rotate: -14deg;
    left: -5%;
    bottom: 46%;
    animation: effect-speaking-animation 2s 1s linear infinite;
  }
}

@keyframes effect-speaking-animation {
  0% {
    transform: rotate(-3deg)translateY(10px);
  }
  10% {
    scale: 1.2;
    transform: rotate(3deg)translateY(-3px);
  }
  20% {
   
    transform: rotate(-3deg)translateY(10px);
  }
  50% {
    scale: 0.8;
    transform: rotate(3deg)rotate(3deg)translateY(-3px);
  }
  60% {
   
    scale: 1.2;
    transform: rotate(-3deg)translateY(10px);
  }
  70% {
    scale: 0.8;
    transform: rotate(3deg)rotate(3deg)translateY(-3px);
  }
  80% {
   
    scale: 1.2;
    transform: rotate(-3deg)translateY(10px);
  }
  90% {
    transform: rotate(3deg)rotate(3deg)translateY(-3px);
  }
  100% {
   
    transform: rotate(-3deg)translateY(10px);
  }
}