• Typing effect can be made in two methods one is pure CSS and javascript and CSS. 
  • So today I am going to give the information about pure CSS so let's get started.
  • You can use this in blogger, WordPress, and HTML websites.
  • So the thing we are making is going to look like this:

See the Pen Pure CSS typewriter effect by Aryan R.H (@aryan_r_h) on CodePen.

  • So friends to this you need two items that are one is a file called index.html and another is file is style.css.
Screenshot: -

  • In index.html the code looks like this: -
 <!doctype html>  
<html lang="en">
<meta charset="utf-8">
<title>Pure CSS typing effect by www.techs-olution.xyz</title>
<meta name="description" content="Pure CSS typing effect by www.techs-olution.xyz">
<meta name="author" content="www.tech-solution.xyz">
<link rel="stylesheet" href="styles.css">
<h1><span class="text_1">This is my first pen on </span><a href="https://codepen.io/aryan_r_h">Codepen</a></h1>
  • Afterward, you can change the text inside it and now the style.css file looks like this: -
 @keyframes typewriter {  
100% {
width: 0;
80% {
width: 10.2em;
@keyframes caret {
100% {
opacity: 0;
50% {
opacity: 1;
.text_1 {
overflow: hidden;
white-space: nowrap;
animation: typewriter;
display: inline-block;
position: relative;
animation-duration: 10s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
.text_1::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);

  • That's it if you have made a index.html and style.css files and saved with these codes in a folder then you are done and you can check it adjust it with yourself.

Hi, friends welcome to my blog www.tech-solution.xyz. I request you friends please leave a comment below for more posts like this and please pls share this with your friends. Thank you kindly from the author of this blog Aryan.R.H. 

Post a Comment

Previous Post Next Post