<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 40px;
background-color: #666666;
}
#main {
height: 40px;
white-space: nowrap;
overflow: hidden;
font-family: 'Source Code Pro', monospace;
font-size: 28px;
color: rgba(255, 255, 255, .70);
position: relative;
}
#border {
border-bottom: solid 3px rgba(0, 255, 0, .75);
position: absolute;
right: -7px;
width: 20px;
}
/* Animation */
#main {
animation: animated-text 2s steps(30, end) 1s 1 normal both
}
#border {
animation: animated-cursor 600ms steps(30, end) infinite;
}
/* text animation */
@keyframes animated-text {
from {
width: 0;
}