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