如何将跳跃点添加到html和css中的文本中

Question

当有人打字时，如何在跳转的文本中添加三个点，就像在Google环聊中一样。是否有针对此的css / html解决方案？

Answer 1

使用css animation和@keyframes

很容易实现

关于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>