CodePen

HTML

            
              <div id="go">

  <a href="#go">Animate</a> <a href="#reset">Reset</a>
  
  <p class="text">smashingmag</p>
  
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @-webkit-keyframes typing { to { width: 0; } }
@keyframes typing { to { width: 0; } }
@-webkit-keyframes cursor { 50% { border-color: transparent; } }
@keyframes cursor { 50% { border-color: transparent; } }

.text {
  width: 6.6em;
	width: 11ch; /* Number of characters */
  border-right: .1em solid;
  overflow: hidden;
  font: 5em monospace;
  margin-top: 50px;
  -webkit-animation: cursor 1s step-end infinite;
  animation: cursor 1s step-end infinite;
}

#go:target .text {
  -webkit-animation: typing 4s steps(11) forwards,
		                 cursor 1s step-end infinite;
  animation: typing 4s steps(11) forwards,
		         cursor 1s step-end infinite;
}

a {
  padding: 5px 10px;
  background: blue;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font: .9em Arial;
  margin-top: 10px;
  display: inline-block;
}

a:hover {
  opacity: 0.6;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................