自己做的一个css文字逐字显示效果

function sliceStrWithSpan(str) {
    var strArr = str.slice('');
    var strReturn = '';
    for (var i = 0; i < strArr.length; i++) {
        strReturn = strReturn + "<span class='str_animate'>" + strArr[i] + "</span>"
    }
    return strReturn;
}

function initStrAnimate(ln, delayTime) {
    // ln:需要展示动画的字符串长度
    // delayTime:延迟时间
    var styleSheets = document.styleSheets;
    var currentStyleSheet = null;
    for (var i = 0; i < styleSheets.length; i++) {
        if (styleSheets[i].ownerNode && styleSheets[i].ownerNode.id === 'emptyRules') {
            currentStyleSheet = styleSheets[i];
            // 丝滑
            currentStyleSheet.insertRule('@-webkit-keyframes textReveal{0% {opacity: 0;}100% {opacity: 1;}}', currentStyleSheet.cssRules.length);
            // 顿挫
            // currentStyleSheet.insertRule('@-webkit-keyframes textReveal{0% {opacity: 0;}80% {opacity: 0;}81% {opacity: 1;}100% {opacity: 1;}}', currentStyleSheet.cssRules.length);
            currentStyleSheet.insertRule('.str_animate {opacity: 0;-webkit-animation: textReveal 1s linear forwards;}', currentStyleSheet.cssRules.length);
            for (var j = 1; j <= ln; j++) {
                currentStyleSheet.insertRule('.str_animate:nth-child(' + j + '){-webkit-animation-delay: ' + (j * delayTime) + 'ms;}', currentStyleSheet.cssRules.length);
            }
            break;
        }
    }
}

<style id="emptyRules"></style>

initStrAnimate(navigator.appVersion.length, 20);
document.getElementById("browser_info").innerHTML = sliceStrWithSpan(navigator.appVersion)