css动画——...陆续出现表示进行中

今天拿到一个需求，要求显示“进行中。。。”，后面的三个点要求做成动画，陆续出现

百度找了好多，终于找到一个靠谱的，代码如下

<div>测试中<span class="ani_dot">...</span></div>

定义动画，因为是3个点，所以在分成3份，0%， 33%， 66%， 100%写上这个时刻的显示

核心就是，两个框，控制外框的宽度显示出几个点，overflow:hidden隐藏滚动条，然后加上margin让整个box的站宽保持一致 

@keyframes dot {
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
	display: inline-block;
    width: 1.5em;
    vertical-align: bottom;
    overflow: hidden;
	font-family: simsun; /*字体很重要*/
    animation: dot 3s infinite step-start;
}

本来我在网上搜索到，从上到下的流动，两个元素叠在一起，看上去很流畅的过度，但是试了下用在左右容器会有空位，也在这里记录一下

<div class="father">
  <span class="son">...</span>
  <span class="son">...</span>
</div>

@keyframes rowup {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100px);
  }
}

.father {
	width: 42px;
  height: 100px;
  overflow: hidden;
}

.son {
	width: 20px;
  height: 100px;
	display: inline-block;
  	box-sizing: border-box;
  	animation: 3s rowup linear infinite normal;
}