Css body { padding-top: 12em; display:flex; justify-content: center; } #type p { color: #fff; font-family: arial; overflow: hidden; border-right: .12em solid; white-space: nowrap; margin: 0 auto; font-size:3em; color:black; animation: typing 3s steps(25, end), caret .5s step-end infinite; -webkit-animation: typing 3s steps(25, end), caret .5s step-end infinite; -moz-animation: typing 3s steps(25, end), caret .5s step-end infinite; -ms-animation: typing 3s steps(25, end), caret .5s step-end infinite; -o-animation: typing 3s steps(25, end), caret .5s step-end infinite; animation: typing 3s steps(25, end), caret .5s step-end infinite }} @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes caret { from, to { border-color: transparent } 50% { border-color: black }} @-webkit-keyframes typing {from {width: 0} to {width: 100%}} @-moz-keyframes typing {from {width: 0} to {width: 100%}} @-ms-keyframes typing {from {width: 0} to {width: 100%}} @-o-keyframes typing {from {width: 0} to {width: 100%}} @keyframes typing {from {width: 0} to {width: 100%}} @-webkit-keyframes caret {from, to {border-color: transparent} 50% {border-color: #000}} @-moz-keyframes caret {from, to {border-color: transparent} 50% {border-color: #000}} @-ms-keyframes caret {from, to {border-color: transparent} 50% {border-color: #000}} @-o-keyframes caret {from, to {border-color: transparent} 50% {border-color: #000}} @keyframes caret {from, to {border-color: transparent} 50% {border-color: #000}} HTML body { padding-top: 12em; display:flex; justify-content: center; } #type p { color: #fff; font-family: arial; overflow: hidden; border-right: .12em solid; white-space: nowrap; margin: 0 auto; font-size:3em; color:black; animation: typing 3s steps(25, end), caret .5s step-end infinite; -webkit-animation: typing 3s steps(25, end), caret .5s step-end infinite; -moz-animation: typing 3s steps(25, end), caret .5s step-end infinite; -ms-animation: typing 3s steps(25, end), caret .5s step-end infinite; -o-animation: typing 3s steps(25, end), caret .5s step-end infinite; animation: typing 3s steps(25, end), caret .5s step-end infinite }} @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes caret { from, to { border-color: transparent } 50% { border-color: black }} @-webkit-keyframes typing {from {width: 0} to {width: 100%}} @-moz-keyframes typing {from {width: 0} to {width: 100%}} @-ms-keyframes typing {from {width: 0} to {width: 100%}} @-o-keyframes typing {from {width: 0} to {width: 100%}} @keyframes typing {from {width: 0} to {width: 100%}} @-webkit-keyframes caret {from, to {border-color: transparent} 50% {border-color: #000}} @-moz-keyframes caret {from, to {border-color: transparent} 50% {border-color: #000}} @-ms-keyframes caret {from, to {border-color: transparent} 50% {border-color: #000}} @-o-keyframes caret {from, to {border-color: transparent} 50% {border-color: #000}} @keyframes caret {from, to {border-color: transparent} 50% {border-color: #000}} HTML: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id="type"> <p>Hello Lolzteam!</p> </div> </body> </html> HTML <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id="type"> <p>Hello Lolzteam!</p> </div> </body> </html>