TypeWritter Effect only CSS
- Control over the speed and delay of the typing animation, allowing for a realistic or exaggerated effect.
- Ability to control the cursor and blinking effect, to make it appear as though the text is being typed on a real typewriter.
- Flexibility to apply the effect to specific elements, such as headings or paragraphs, rather than the entire page.
- The ability to customize the font and color of the text to match the design of the website or application.
- The ability to control the looping and timing of the effect, so that it can be set to stop after a certain amount of text has been typed or to repeat indefinitely.
Note: Use CSS animation and delay to simulate typewriter effect on text, with each letter or word appearing one at a time.
The typewriter effect is a visual effect that mimics the appearance of text being typed on a typewriter. This can be achieved by having each letter, word, or line appear on the screen one at a time, with a slight delay between each character. This effect can be used in various forms of digital media, such as websites, videos, and presentations, to add a sense of realism and nostalgia to text-based content. It can also be used to emphasize the importance of a specific piece of text or to add drama to a scene. Overall, the typewriter effect is a simple yet effective way to add an extra layer of visual interest to text-based content.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700">
<div class="container">
<div class="typewriter">I'm Front end Developer</div>
</div>
css code
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: clamp(2rem, 2.8vw, 5rem);
font-family: Raleway;
font-weight: bold;
}
.typewriter {
width: 21.5ch;
white-space: nowrap;
overflow: hidden;
border-right: 4px solid #212121;
animation: cursor 1s step-start infinite,
text 5s steps(18) alternate infinite;
}
@keyframes cursor {
0%, 100% {
border-color: #212121;
}
}
@keyframes text {
0% {
width: 0;
}
100% {
width: 21.5ch;
}
}
Term's of use !
The typewriter effect can be created using only CSS by using the "animation" and "animation-delay" properties to control the timing and appearance of each letter or word. It can be used on any text-based HTML element and can be customized with various options such as speed, looping and other animation properties. The use of this effect is generally unrestricted and can be used freely on personal or commercial projects. However, it is important to ensure that the effect is used in an accessible and user-friendly way, and that it does not negatively impact the overall usability of a website or application.