.effect-sleeping {
  * {
    position: absolute;
    z-index: 4;
  }
  .sleeping-1 {
    height: 23px;
    rotate: -20deg;
    left: 14%;
    animation: effect-sleeping-animation 5s 2.5s linear infinite;
  }
  .sleeping-2 {
    height: 12px;
    rotate: 25deg;
    left: 65%;
    opacity: 0;
    bottom: 53%;
    animation: effect-sleeping-animation-bubble 5s 3s linear infinite;
  }
  .sleeping-3 {
    height: 11px;
    rotate: 30deg;
    left: 94%;
    bottom: 33%;
    animation: effect-sleeping-animation 5s 2s linear infinite;
  }
  .sleeping-4 {
  height: 12px;
    rotate: 25deg;
    opacity: 0;
    left: 65%;
    bottom: 53%;
    animation: effect-sleeping-animation-bubble 5s 2s linear infinite;
  }
  .sleeping-5 {
    height: 13px;
    rotate: 19deg;
    left: 58%;
    bottom: 32%;
    animation: effect-sleeping-animation 5s 0.5s linear infinite;
  }
  .sleeping-6 {
    height: 12px;
    rotate: 25deg;
    left: 65%;
    opacity: 0;
    bottom: 53%;
    animation: effect-sleeping-animation-bubble 5s 1s linear infinite;
  }
  .sleeping-7 {
    height: 13px;
    rotate: -20deg;
    left: 45%;
    bottom: 10%;
    animation: effect-sleeping-animation 5s 0.5s linear infinite;
  }
 .sleeping-8 {
    height: 12px;
    rotate: 25deg;
    left: 65%;
    opacity: 0;
    bottom: 53%;
    animation: effect-sleeping-animation-bubble 5s 4s linear infinite;
   }

  .sleeping-9 {
    height: 10px;
    rotate: 14deg;
    left: 50%;
    bottom: 50%;
    animation: effect-sleeping-animation 5s 0.3s linear infinite;
  }
  .sleeping-10 {
      height: 12px;
    rotate: 25deg;
    left: 65%;
    bottom: 53%;
    opacity: 0;

    animation: effect-sleeping-animation-bubble 5s 0s linear infinite;
  }
}
@keyframes effect-sleeping-animation {
  30% {
    transform: translate(6px, -5px);
  }
  50% {
    transform: translate(-10px, -5px), rotate(20deg);
  }
  75% {
    transform: translate(-3px, -22px);
    opacity: 1;
  }
  100% {
    transform: translate(-25px, -35px);
    opacity: 0;
  }
}
 



@keyframes effect-sleeping-animation-bubble{
  0%{
    opacity: 1;
      scale: 0.8;
  }
  25%{
    transform: translate(-29px,-12px);
  scale: 1;
  }
  50%{
    transform: translate(-7px,-22px);
  scale: 1.5;
  }
  70%{
    transform: translate(-21px,-22px);
    transform-origin: center;
  scale: 2;
  opacity: 1;
  }
  75%{
    transform: translate(-21px,-30px);
   
    opacity: 0.8;
  }
  80%{
    transform: translate(-21px,-30px);
    scale: 3;
    opacity: 0;
  }
  100%{
     scale: 0.8;
     opacity: 0;
  }
}