- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 −
Published on 13-Mar-2021 12:12:33
- Related Questions & Answers
- How to delay an animation with CSS
- Wiggle Animation Effect with CSS
- Bounce 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
- Flash Animation Effect with CSS
- Flip Animation Effect with CSS
- CSS top property with Animation
- Fade In Animation Effect with CSS
- Fade Out Animation Effect with CSS
- Roll In Animation Effect with CSS
Advertisements