Typing animation using pure css implementation

Question

Hey so Im following this guide to create a type animation: http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/. However I got to a point where the blinking cursor is there after every div element but the animation doesn't occur. Would y'all mind looking over and seeing what the issue might be.

Heres my HTML structure:

<div class="line1">
    &lt;!DOCTYPE html><span>&nbsp;</span>
</div>
<div class="line2">
    &lt;html><span>&nbsp;</span>
</div>
<div class="line3">
    &emsp;&lt;head><span>&nbsp;</span>
</div>
<div class="line4">
    &emsp;&emsp;&lt;title&gt;
    <p>Welcome! :)</p>
    &lt;/title><span>&nbsp;</span>
</div>

Here is a jfiddle link to my css code and html code

Thanks so much for your help !

Answer 1

Try this simple css

p{
  color: #3D3F46;
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: type 10s steps(60, end);
}

p:nth-child(2){
  animation: type2 8s steps(60, end);
}

p a{
  color: #3D3F46;
  text-decoration: none;
}

span{
  animation: blink 1s infinite;
}

@keyframes type{
  from { width: 0; }
}

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; }
}

@keyframes blink{
  to{opacity: .0;}
}

<p>Hi  This is the sample text for typing effect using css <span>|</span></p>

Answer 2

Can you try with this simple snippet , we need to define the animation part like below

@-webkit-keyframes typing {
    from { width: 0 }
    to { width:16.3em }
}

@-moz-keyframes typing {
    from { width: 0 }
    to { width:16.3em }
}

@-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

@-moz-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

body { font-family: Consolas, monospace; }

h1 { 
    font-size:150%;
    width:16.3em;
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid black;
    
    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}
h2 { 
    font-size:150%;
    width:16.3em;
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid black;
    
    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}
h3 { 
    font-size:150%;
    width:16.3em;
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid black;
    
    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}

<h1>Typing animation is working </h1>
<h2>Typing animation is working </h2>
<h3>Typing animation is working </h3>