css multiple line typing effect not working

Question

i am trying a multiple line css animation of typing. i have some text in p tag . the first line is working perfectly but some text in not shown in the end. i have used overflow : hidden and white-space : no-wrap for that effect and also other rules still the second line not showing.

html :

           <div className="col-sm">
            <p id="intro">
             i am trying a multiple line css animation of typing. i have some text in p tag . the first line is working perfectly but when some text in not shown. i have used overflow : hidden and white-space : no-wrap for that effect and also other rules still the second line not showing 

            </p>
            </div>

css :

#intro {
  border-right: 1px solid orange;
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  animation: type 10s infinite;
  animation-delay: 5s; 
  animation-fill-mode: forwards;

}

@keyframes type {

  from{ opacity: 0.8 ; width: 0 ;}
  to{ opacity: 1 ; width: 100%; }

}