css动画step和both的疑问？

Question

如下代码：

<button>订单提交中<span class="dotting"></span></button>

.dotting {
    display: inline-block; min-width: 2px; min-height: 2px;
    margin-right: 8px;
    box-shadow: 2px 0, 6px 0, 10px 0;
    animation: dot 4s infinite step-start both;
}
@keyframes dot {
    25% { box-shadow: none; }          /* 0个点 */
    50% { box-shadow: 2px 0; }         /* 1个点 */
    75% { box-shadow: 2px 0, 6px 0; }  /* 2个点 */ 
}

此动画中，keyframes没有0% 和 100% ，第一帧是 25% ？最后一帧是 75% ?
step-start 跳过第一帧，难道是从50% ？
both 等待期样式为第一帧样式，完成期保持最后一帧样式，25%，50%，75%，第三个点，算从哪一帧出来的？

Answer 1

没有0% 和 100% 默认就是元素原本的样式，也就是3个点，完整写法是这样

@keyframes dot {
    0%,100%{ box-shadow: 2px 0, 6px 0, 10px 0;} /* 3个点 */
    25% { box-shadow: none; }          /* 0个点 */
    50% { box-shadow: 2px 0; }         /* 1个点 */
    75% { box-shadow: 2px 0, 6px 0; }  /* 2个点 */ 
}

至于both，这里完全可以不需要用，因为动画是无限循环的，不需要停留在最后一帧(或第一针)