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 !

sansan · Accepted Answer · 2017-01-12 05:35:07Z

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>

answered Jan 12, 2017 at 5:35

sansan

8431 gold badge7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arun Kumar Over a year ago

very nice it's very simple :)

Jishnu V S · Accepted Answer · 2017-01-12 05:42:40Z

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>

Hari Om Srivastava · Accepted Answer · 2017-01-12 05:12:01Z

Have a look

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@-webkit-keyframes typing {
    from { width: 0 }
    to { width:710px; }
}

@-moz-keyframes typing {
    from { width: 0 }
    to {width:710px; }
}

@-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:710px;
    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;
}
</style>
</head>

<body>
<h1>  
&lt;!DOCTYPE html><span>&nbsp;</span>&lt;html><span>&nbsp;</span>&emsp;&lt;head><span>&nbsp;</span>&emsp;&emsp;&lt;title&gt;Welcome! :)&lt;</title><span>&nbsp;</h1>
</body>
</html>

Collectives™ on Stack Overflow

Typing animation using pure css implementation

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related