как заставить число <h3> появляться только с началом их анимации (css3)

Question

Мне бы хотелось, чтобы три моих h3 появлялись на странице только тогда, когда запускается эффект анимации на пишущей машинке.Прямо сейчас в этом варианте кода, в то время как первый h3 (совет пишущей машинки) подвергается эффекту пишущей машинки, два других h3s (пишущая машинка-юбилей и пишущая машинка-жулик) просто стоят там, ожидая анимации своего хода (задержки анимации).Хотя я хочу, чтобы другие два h3 появлялись только тогда, когда начинается анимация их набора.Был бы признателен, если бы вы могли помочь мне.

@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color:#26293c; }
 }


#typewriter-advice {
overflow: hidden;
border-right: 0.2px solid #26293c; /* The typwriter cursor */
white-space: nowrap;
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
padding: 5px;
letter-spacing: .1em; /* Adjust as needed */
animation: 
  typewriter-advice 5.5s steps(40, end),
  blink-caret .75s step-end 5s;
 }
@-webkit-keyframes typewriter-jubilee {
from {width:0%}
to {width:100%}
 }

@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color:#26293c; }
  }

#typewriter-jubilee {
overflow: hidden;
border-right: 0.2px solid #26293c; /* The typwriter cursor */
white-space: nowrap;
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
padding: 11px;
letter-spacing: .1em; /* Adjust as needed */
animation: 
  typewriter-advice 5.5s steps(40, end),
  blink-caret .75s step-end 5s;
  animation-delay: 5s;
}

@-webkit-keyframes typewriter-rogue {
from {width:0%}
to {width:100%}
 }

@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color:#26293c; }
  }

 #typewriter-rogue {
overflow: hidden;
border-right: 0.2px solid #26293c; /* The typwriter cursor */
white-space: nowrap;
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
padding: 5px;
letter-spacing: .1em; /* Adjust as needed */
animation: 
  typewriter-advice 5.5s steps(40, end),
  blink-caret .75s step-end 5s;
  animation-delay: 11s;
 }

А вот HTML

 <section class="full-length" id="one">
       <div class="third-width" id="advice">
          <img src="img/advice.png" alt="picture of advice for tech 
newbies"/>
       </div>
       <div class="third-width" id="advice-text">
           <h3 id="typewriter-advice"><span>Advice</span> Making Teamwork 
Work</h3>
           <p>This project was part of teamwork with other web developers 
around the world.
               The idea was to make a website via common contributions while 
keeping track of updates
               and changes in the main code. </p>
           </p>
       </div>
    </section>
    <section class="full-length" id="two">
        <div class="third-width" id="jubilee-text">
            <h3 id="typewriter-jubilee"><span>Jubilee</span> "I Celebrate 
Myself &amp; Sing Myself"</h3>
            <p>Jubilee Project was the first full-fledged attempt at 
portfolio websites.
                It came as a celebration of a new milestone change in tech 
skills.
            </p>
        </div>
        <div class="third-width" id="jubilee">
            <img src="img/jubilee.png" alt="jubilee project picture"/>   
        </div>
    </section>
    <section class="full-length" id="three">
        <div class="third-width" id="rogue">
            <img src="img/rogue.png" alt="picture of advice for tech 
newbies"/>
        </div>
        <div class="third-width" id="rogue-text">
            <h3 id="typewriter-rogue"><span>Fresh</span> from the Start</h3>
            <p>Rogue Pickings was "fresh" in a few senses of the word.
                It was both a fresh start of a web dev career, and a website 
for fresh food and deliveries.
            </p>
        </div>
    </section>