等宽字体延伸到的 ch 长度单位和动画 animation-timing-function

新知识点get！

等宽字体（monospaced font）是指字符宽度相同的电脑字体。与此相对，字符宽度不尽相同的电脑字体称为比例字体（proportional font）。

东亚字体基本都是等宽字体，但是英文字符，举个例子，milk 明显 M 和 i 所占据的空间不一样。

等宽字体例子

font-family: Consolas, Monaco, monospace;

一个应用的特效实例  CSS content换行技术实现字符animation loading效果

里面谈到了一个CSS3属性， step-start，是animation-timing-function的值，W3Cschool中没有记录

深入理解CSS3 Animation 帧动画

step 函数能够将动画变成一帧一帧的，相较于transition的0s切换，能够控制多个帧状态。

此外， ch 这个长度单位，数字“0”的宽度，和等宽字体应用 text-indent属性，便能够实现 一个点 两个点 三个点的切换了

代码如下：

    span {
        font-family: Consolas,monaco,monospace;
        animation: 3s dot step-start infinite;
        text-indent:-2ch;
        overflow:hidden;
        width:3ch;
        display:inline-block;
        vertical-align:bottom;
    }

@keyframes dot {
    % {
        color:red;
        text-indent:-1ch;
    }

    % {
        color:green;
        text-indent:;
    }
}

 订单提交中<span>...</span>