Text filling.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="fillingtext.css">
<title>Text Effects</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 120px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color:#f5f5f5;
}
.text:before{
content: 'Text filling.';
color: black;
position: absolute;
width: 0;
overflow: hidden;
transition: 0.9s;
}
.text:hover:before{
width: 100%;
}
</style>
</head>
<body>
<span class="text">Text filling.</span>
<!-- <h1>OE hero !!!!!</h1>
<h2>Go back this site is not for you.</h2>
<h3>My boy!!!!!</h3>
</body> -->
</html>