Type Your Text Automatically Using Pure CSS: Hi Friends, Today i will tell you how to create a animation of automatic typing without using any jquery or javascript. It looks very pretty when anyone see text is automatically typing in the website or somewhere else. You have seen in many websites text types without any human being, now you can do it using css and html code in your website.
See the live demo and download the code from below:
For creating animation of text types automatically, you have to use some html and css code. These code are
I have created one paragraph in which .text class is there and inside the paragraph, your content is there.
<p class="text">Type Your Text Automatically Using Pure CSS</p> |
<p class="text">Type Your Text Automatically Using Pure CSS</p>
I have given some styling to my text, you can give according to your requirement.
You have to change some code according to your content. These changes are
.text { font: bold 200% Calibri; border-right: .1em solid black; width: 37ch; Color: #008000; white-space: nowrap; overflow: hidden; margin: 30px auto; -webkit-animation: type 4s steps(37, end), blink-caret .4s step-end infinite alternate; } @-webkit-keyframes type { from { width: 0; } } @-webkit-keyframes blink-caret { 50% { border-color: transparent; } } |
.text { font: bold 200% Calibri; border-right: .1em solid black; width: 37ch; Color: #008000; white-space: nowrap; overflow: hidden; margin: 30px auto; -webkit-animation: type 4s steps(37, end), blink-caret .4s step-end infinite alternate; } @-webkit-keyframes type { from { width: 0; } } @-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
For any problem you can see the live demo and download the code from below.
Read About Other Interesting Things below.
I hope you will like Type Your Text Automatically Using Pure CSS. If You found it useful please subscribe my blog.
Categories: Website Design
Leave a Reply