<h1>Lorem <span class="reveal">Ipsum dolor</span></h1>
<p>Mauris imperdiet, ante quis malesuada maximus, velit dolor <span class="reveal">maximus magna, eget lacinia purus neque in purus. Nunc quis vestibulum nulla,</span> in tincidunt elit.
</p>

.reveal {
  color: #0000;
  --g: no-repeat linear-gradient(#00DFFC 0 0) 0 0;
  background: var(--g), var(--g);
  background-size: 0 100%;
  -webkit-background-clip: padding-box,text;
          background-clip: padding-box,text;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  animation: 
    t 1.2s  .5s both,
    b 1.2s 1.3s both;
}
@keyframes t{
  to {background-size:150% 100%}
}
@keyframes b {
  to {background-position:-200% 0,0 0}
}

body {
  font-family: sans-serif;
  font-weight: 700;
  padding:20px;
  background:#005F6B;
  color:#00DFFC
}
p {
  font-size:25px;
}
h1 {
  font-size:40px;
  text-align:center;
}
h1,p{
  margin:10px auto;
  max-width:600px;
}