<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;
  background: linear-gradient(red 0 0) no-repeat;
  background-size: 0% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  animation: t 1.2s .5s both;
}

@keyframes t{
  to {background-size: 100% 100%}
}

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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.