文字从中间向两边延展

<p class="reveal">纯css由中间向两边延展</p>

　css:

body{
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: #222;
        }
        .reveal{
            position: relative;
            display: flex;
            color: #6ee1f5;
            font-size: 2em;
            font-family: Raleway, sans-serif;
            letter-spacing: 3px;
            /*text-transform: uppercase;*/
            /*white-space: pre;*/
        }
        span{
            opacity: 0;
            transform: scale(0);
            animation: fadeIn 2.4s forwards;
        }
        .reveal::before,.reveal::after{
            position: absolute;
            content: "";
            top: 0;
            bottom: 0;
             2px;
            height: 100%;
            background: white;
            opacity: 0;
            transform: scale(0);
        }
        .reveal::before{
            left: 50%;
            animation: slideLeft 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
        }
        .reveal::after{
            right: 50%;
            animation: slideRight 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
        }
        @keyframes fadeIn {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes slideLeft {
            to {
                left: -6%;
                opacity: 1;
                transform: scale(0.9);
            }
        }

        @keyframes slideRight {
            to {
                right: -6%;
                opacity: 1;
                transform: scale(0.9);
            }
        }

　　js:

  var duration = 0.8;
        var delay = 0.3;
        var revealText = document.querySelector(".reveal");
        var letters = revealText.textContent.split("");
        revealText.textContent = ""; // 清空文本节点
//        var middle = letters.filter(e => e !== " ").length / 2
        var middle = letters.length/2;
        letters.forEach((letter, i) => {
            var span = document.createElement("span");
            span.textContent = letter;
            span.style.animationDelay = `${delay + Math.abs(i - middle) * 0.1}s`;
            revealText.append(span)
        })