The text reveal is the effect of animation that is revealed one by one animated text using html and css. In recent days are a creative way and it will look great and learn very quickly.
In the HTML and CSS used to approach the keyframes to animated frames and slowly reveal the text easily by (from) and (to).
Here, I created an unordered list in HTML and used tag <ul> and <li> and providing a background color for looking effects.
HTML Code:
<body>
<div class="container">
<ul class="list-content">
<li class="list-content second">Let's</li>
<li class="list-content third">Starts Home</li>
<li class="list-content four">Beign</li>
</ul>
</div>
Style:
body{
background-color:#323232;
}
.list-content
{
display:block;
opacity:0;
color:#fff;
font-family:Arial;
font-size:36px;
font-weight:500px;
text-transform:uppercase;
line-height:50px;
text-decoration:none;
animation:effect .5s forwards;
}
.second{
animation-delay:.10s;
}
.third{
animation-delay:.15s;
}
.four{
animation-delay:.25s;
}
@keyframes effect{
from{
transform:translateY(20px);
}
to{
opacity:1;
transform:none;
}
}
