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