如何将动态属性应用于CSS动画？

Question

我整理了一种打字效果，实际上span的宽度从0rem变为8rem，而与跨度中文本的长度无关。是否可以根据跨度中文本的长度来更改宽度范围的顶部？

代码如下：

    .sentence {
         color: #222;
         font-size: 30px;
         text-align: left;
    }
    
    .wrapper {
        background-color: #f5f5f5;
        font-family: 'Raleway', sans-serif;
        margin: 100px auto;
        padding: 40px 40px;
        position: relative;
        width: 70%;
    }
    
    .typing {
    	display: inline;
    	text-indent: 8px;
    }
    
    .typing span {
      opacity: 0;
      width: 0rem;
      white-space: nowrap;
      letter-spacing: 0.03rem;
      border-right: 0.2rem solid rgba(0, 0, 0, 1);
      animation: typing 20s steps(10) 0s infinite normal both,
        blinking-caret 500ms step-end infinite;
      -ms-animation: typing 20s steps(10) 0s infinite normal both,
        blinking-caret 500ms step-end infinite;
      -webkit-animation: typing 20s steps(10) 0s infinite normal both,
        blinking-caret 500ms step-end infinite;
      color: #00abe9;
      overflow: hidden;
      position: absolute;
    }
    
    @keyframes blinking-caret {
      from, to {
        border-right-color: transparent;
      }
      50% {
        border-right-color: rgba(0,0,0,1);
      }
    }
    
    @keyframes typing {
      5% {
        opacity: 1;
      }
      15% {
        width: 8rem; // Is it possible for this to be dynamically set - without JS?
      }  
      19% {
        width: 0rem;
        opacity: 0.75;
      }
      20% {
        opacity: 0;
      }
    }
    
    .typing span:nth-child(2) {
      animation-delay: 4s;
    }
    
    .typing span:nth-child(3) {
      animation-delay: 8s;
    }
    
    .typing span:nth-child(4) {
      animation-delay: 12s;
    }
    
    .typing span:nth-child(5) {
      animation-delay: 16s;
    }

<section class="wrapper">
      
      <h2 class="sentence">My favorite food is
        <div class="typing">
          <span>pizza.</span>
          <span>burgers.</span>
          <span>soup.</span>
          <span>pasta.</span>
          <span>tacos.</span>
        </div>
      </h2>
    </section>