.dot {
  position: relative;
  z-index: 6;
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
  float: left;
  margin: 2px;
  transform: scale(.7);
  @include animation();
  &:nth-child(2) {
    @include animation($animation-speed * 0.3);
  }
  &:nth-child(3) {
    @include animation($animation-speed * 0.6);
  }
}

.icon--chatbubble .bubble1 {
  background-color: #e6e6e6;
  -webkit-animation: chatBubbles 1s ease-in-out infinite;
     -moz-animation: chatBubbles 1s ease-in-out infinite;
          animation: chatBubbles 1s ease-in-out infinite;
}
.icon--chatbubble .bubble2 {
  background-color: #cccccc;
  -webkit-animation: chatBubbles 1s ease-in-out infinite;
     -moz-animation: chatBubbles 1s ease-in-out infinite;
          animation: chatBubbles 1s ease-in-out infinite;
  -webkit-animation-delay: .3s;
     -moz-animation-delay: .3s;
          animation-delay: .3s;
}
.icon--chatbubble .bubble3 {
  background-color: #b3b3b3;
  -webkit-animation: chatBubbles 1s ease-in-out infinite;
     -moz-animation: chatBubbles 1s ease-in-out infinite;
          animation: chatBubbles 1s ease-in-out infinite;
  -webkit-animation-delay: .5s;
     -moz-animation-delay: .5s;
          animation-delay: .5s;
}

@-webkit-keyframes chatBubbles {
  0% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes chatBubbles {
  0% {
       -moz-transform: translateY(0);
  }
  50% {
       -moz-transform: translateY(-10px);
  }
  100% {
       -moz-transform: translateY(0);
  }
}
@keyframes chatBubbles {
  0% {
            transform: translateY(0);
  }
  50% {
            transform: translateY(-10px);
  }
  100% {
            transform: translateY(0);
  }
}