CSS 实现 文字“加载中...” 后面3个小点的动画

<p class="text">识别中<dot class=" dot">...</dot></p>

.dot{
display: inline-block;
text-align: center;
margin: 0 auto;
overflow: hidden;
height: 1em;
line-height: 1em;
vertical-align: -.25em;
}
.dot::before{
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33%{transform: translateY(-2em);}
66%{transform: translateY(-1em);}
}