Self-writing text
By Marcin Olejarz
Simple animation of writing text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#rectangle {
position:relative;
float:left;
font-size:18px;
font-family:"Lucida Console", Monaco, monospace;
background-color:white;
}
#rectangle > span {
position:absolute;
top:0;
right:0;
height:100%;
background-color:white;
border-left:1px solid transparent;
animation:Fwrite 15s steps(25,start) infinite, Wbar 1s step-end infinite;
-webkit-animation:Fwrite 15s steps(25,start) infinite, Wbar 1s step-end infinite;
}
#rectangle > p:hover {
animation-play-state:paused;
}
@keyframes Fwrite
{
0% { width:100%; }
100% { width:0; }
}
@keyframes Wbar
{
0% { border-left-color:transparent; }
50% { border-left-color:black; }
100% { border-left-color:transparent; }
}
@-webkit-keyframes Fwrite
{
0% { width:100%; }
100% { width:0; }
}
@-webkit-keyframes Wbar
{
0% { border-left-color:transparent; }
50% { border-left-color:black; }
100% { border-left-color:transparent; }
}
</style>
</head>
<body>
<div id="rectangle">Mr. Robot is writing this text.<span></span></div>
</body>
</html>