<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.