- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create Typewriter Animation with CSS?
With the help of CSS animations, we can create a typewriter animation using JavaScript.
The following example illustrates this effect.
Example
<!DOCTYPE html> <html> <head> <style> div { margin: 2%; font-family: Courier, monospace; display: inline-block; } div > div { overflow: hidden; animation: enter 4s steps(30, end), blinker .65s step-end infinite; white-space: nowrap; font-size: 1.4em;; border-right: 5px solid blue; } @keyframes enter { 0% { width: 0% } 100% { width: 100% } } @keyframes blinker { 0%, 100% { border-color: transparent } 50% { border-color: blue; } } </style> </head> <body> <div class="typewriter"> <div class="typewriter-text">This is what you've been waiting for..</div> </div> </body> </html>
Output
This will produce the following result −
- Related Articles
- How to delay an animation with CSS
- How to create Frame by Frame Animation using CSS and JavaScript?
- CSS top property with Animation
- Wiggle Animation Effect with CSS
- Bounce Animation Effect with CSS
- Flash Animation Effect with CSS
- Flip Animation Effect with CSS
- Hinge Animation Effect with CSS
- Pulse Animation Effect with CSS
- Wobble Animation Effect with CSS
- Shake Animation Effect with CSS
- Swing Animation Effect with CSS
- Tada Animation Effect with CSS
- How to set the fill-mode for an Animation with CSS
- How to create tooltips with CSS?

Advertisements