@keyframes dot1 {
  0% {
    background-position: 19% 50%;
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  100% {
    background-position: 19% 50%;
    opacity: 1;
  }
}

@keyframes dot2 {
  0% {
    background-position: 21% 50%;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  54% {
    opacity: 0;
  }
  100% {
    background-position: 21% 50%;
    opacity: 1;
  }
}

@keyframes dot3 {
  0% {
    background-position: 23% 50%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  58% {
    opacity: 0;
  }
  100% {
    background-position: 23% 50%;
    opacity: 1;
  }
}

@keyframes dot4 {
  0% {
    background-position: 25% 50%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  62% {
    opacity: 0;
  }
  100% {
    background-position: 25% 50%;
    opacity: 1;
  }
}

@keyframes dot5 {
  0% {
    background-position: 27% 50%;
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  100% {
    background-position: 27% 50%;
    opacity: 1;
  }
}

@keyframes dot6 {
  0% {
    background-position: 29% 50%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    background-position: 29% 50%;
    opacity: 1;
  }
}

@keyframes dot7 {
  0% {
    background-position: 31% 50%;
    opacity: 0;
  }
  24% {
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  74% {
    opacity: 0;
  }
  100% {
    background-position: 31% 50%;
    opacity: 1;
  }
}

@keyframes dot8 {
  0% {
    background-position: 33% 50%;
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  78% {
    opacity: 0;
  }
  100% {
    background-position: 33% 50%;
    opacity: 1;
  }
}

@keyframes dot9 {
  0% {
    background-position: 35% 50%;
    opacity: 0;
  }
  32% {
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  82% {
    opacity: 0;
  }
  100% {
    background-position: 35% 50%;
    opacity: 1;
  }
}

@keyframes dot10 {
  0% {
    background-position: 37% 50%;
    opacity: 0;
  }
  36% {
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  86% {
    opacity: 0;
  }
  100% {
    background-position: 37% 50%;
    opacity: 1;
  }
}

@keyframes dot11 {
  0% {
    background-position: 39% 50%;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    background-position: 39% 50%;
    opacity: 1;
  }
}