订单提交中... 后前面三点动画

        dot {
            display: inline-block;
            height: 1em;
            line-height: 1;
            vertical-align: -.25em;
            overflow: hidden;
        }


        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);
            }
        }

<a href="javascript:" class="grebtn">订单提交中<dot>...</dot></a>