How do I append jumping dots to a text in html and css

Question

How do i append three dots to a text that are jumping, like in google hangouts, when somebody is typing. Is there a css/html only solution for this?

Answer 1

It's pretty easy to accomplish with css animation and @keyframes

example on jsbin: http://jsbin.com/lejawoji/1/edit

I'm typing<span class="jumping-dots">
  <span class="dot-1">.</span>
  <span class="dot-2">.</span>
  <span class="dot-3">.</span>
</span>
<style>
.jumping-dots span {
  position: relative;
  bottom: 0px;
  animation: jump 2s infinite;
}
.jumping-dots .dot-1{
  animation-delay: 200ms;
}
.jumping-dots .dot-2{
  animation-delay: 400ms;
}
.jumping-dots .dot-3{
  animation-delay: 600ms;
}

@keyframes jump {
  0%   {bottom: 0px;}
  20%  {bottom: 5px;}
  40%  {bottom: 0px;}
}
</style>