how to write css animation for text typing?

Question

<sytle>
.typing{
display: inline-block;
width: 100%;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 2s steps(50, end) alternate;
animation: type 2s steps(50, end) alternate;
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-iteration-count: infinite;
}
@keyframes type{
from { width: 0; }
}
@-webkit-keyframes type{
from { width: 0;  }
}
<style>
<div id="top" class="header">
<div class="text-center">
    <h1 class="typing"  >
<b>Find anything for your Business Instantly</b>
<b>Source >> Supply >> Grow your Business Online</b>
<b>Create your Home &amp; Global website online</b>
    </h1>        
</div>
</div>

i have 3 bold tags which is in h1 tag, here it should display in one line, As one after another bold tag as shown in the link see this link : http://www.indiamart.com/

Please can anyone help me.

I think you'l need a letter selector, which isn't available in CSS. You should probably try a js solution. — Max Payne
– Max Payne, Commented Apr 2, 2016 at 6:38

John · Accepted Answer · 2016-04-02 06:50:24Z

1

Original code by Lea Verou

@-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;
}

<h1>This is a css typewriter</h1>

edited Apr 2, 2016 at 6:50

answered Apr 2, 2016 at 6:42

John

7705 silver badges12 bronze badges

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

2 Comments

Syed Rehaman Over a year ago

Thank you for your help, but here i need three b tags and it should override one another. And i already tried this

John Over a year ago

I don't think it is a typewriter effect in your link. This is just a div with overflow:hidden and a with animation on it, i guess.

Dr.Darshan · Accepted Answer · 2016-07-25 08:19:49Z

0

Use Keyframes to add typing animation to html elements.

.text { 
	font: bold 200% Consolas;
	border-right: .1em solid black;
	width: 28ch;
	white-space: nowrap;
	overflow: hidden;
	margin: 30px;
	-webkit-animation: type 4s steps(28, end),
	blink-caret .4s step-end infinite alternate;
}
@-webkit-keyframes type { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

<p class="text">Stay Hungry ! Stay Foolish !</p>

See Demo here :- http://codingflag.in/mysketch.php?sketch=6

answered Jul 25, 2016 at 8:19

Dr.Darshan

1391 silver badge5 bronze badges

Collectives™ on Stack Overflow

how to write css animation for text typing?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related