CSS 之 逐帧动画 （二）

写在最前面： CSS 永远让你惊喜不断 ……

打字动画

产品想法：
希望一段文本中的字符逐个显现，模拟出一种打字的效果。

实现思路：
让容器的宽度成为动画的主体，就是把所有的文字包裹在这个容器中，然后让他的宽度从0开始 一步步扩张到其该有的宽度
注意： 它不适用于多行文本；

 
忧郁的胡渣


h1{
    width:10ch;  // ch是什么？  数字“0”的宽度  且  1ch = 一个字母 或者 一个数字(整数)    2ch=一个汉字
   overflow:hidden;
   white-space:nowrap;
   border-right:1px solid;
   animation: typing 3s steps(5) , caret 1s steps(1) infinite;
}

// 文字一帧一帧跳出来
@keyframes typing {
    from{
        width:0;
    }
}


// 模拟光标闪烁
@keyframes caret {
    50%{
        border-right:transparent;
    }
}

// 如果想要动态的
$$('h1').forEach(function(h1){
    let  len = h1.textContent.length, s = h1.style;

    s.width = len + 'ch';
    s.animationTimingFunction = "steps(" + len +"),steps(1)";

})