<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 40px;
background-color: #8EBF43;
}
p {
white-space: nowrap;
overflow: hidden;
font-family: 'Source Code Pro', monospace;
font-size: 28px;
color: rgba(255, 255, 255, .70);
}
/* Animation */
p {
animation: animated-text 3s steps(30, end) 1s 1 normal both;
}
/* text animation */
@keyframes animated-text {
from {
width: 0;
}
to {
width: 472px;
}
}
</style>
</head>
<body>
<p>This text doesn’t have a typewriter effect.</p>
</body>
</html>