Best Text Typing Effect CSS Animation Examples

In this blog, we will see the best text typing effect CSS animation Examples, which you can add to your website and make the website more attractive.

Latest Collection of Free Best CSS Text Typing Effect Animation Example Code Snippet.

Best Text Typing Effect CSS Animation Examples With Codepen

Table of Contents

1. Typing animation using Only CSS

Example:-

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Text Typing Effect CSS Animation </title>
</head>
<style type="text/css">
	body{
  background: #606066;
  padding-top: 10px;
} 

h1{
  color: lime; 
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 4s steps(60, end); 
}

h1:nth-child(2){
  animation: type2 8s steps(60, end);
}
 

span{
  animation: blink 1s infinite;
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

::selection{
  background: black;
}
</style>
<body>

<h1>Best Text Typing Effect CSS Animation Examples <span>|</span></h1>

</body>
</html>

Output:-

Demo1:-

See the Pen Text Typing Effect CSS Animation by khushal (@mr__khushal) on CodePen.

Demo2:-

See the Pen #21 – Typing text effect with CSS only by Bojan Krsmanovic (@bojankrsmanovic) on CodePen.

2. Pure CSS Typings Effect Codepen

Example:-

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Text Typing Effect CSS Animation </title>
</head>
<style type="text/css">
body{
		background: #606060;
	}
h1 { 
	box-shadow: .6em 0 0 #05ffa3;
  margin: 2rem 1rem;
	width: 23ch;
  overflow: hidden;
  color: #FFF;
	white-space: nowrap;
	animation: caret .5s step-end infinite alternate,
             type 5s steps(23, end)
}


@keyframes type {
  0% {
    width: 0;
  }

}
@keyframes caret { 
  50% { 
    box-shadow: .6em 0 0 transparent;
  }
}


</style>
<body>

<h1 class="texteffect">Best Text Typing Effect CSS Animation Examples   </h1>

</body>
</html>

Output:-

See the Pen Pure CSS Typings Effect by Mattia Astorino (@equinusocio) on CodePen.