<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>
<p>Mauris imperdiet, ante quis malesuada maximus, velit dolor <span class="reveal clone">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,
    linear-gradient(red 0 0) no-repeat;
  background-size: 0% 100%;
  -webkit-background-clip: padding-box,text;
          background-clip: padding-box,text;
  animation: 
    t 1.2s .5s both,
    b 1.2s 1.3s both;
}
.clone {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
@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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.