text

Best Text Typing Effect CSS Animation Examples

Spread the love

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

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.

3. Typing Text – Date 14 (24 days of animation) Codepen

Output:-

See the Pen Typing Text – Date 14 (24 days of animation) by januaryofmine (@januaryofmine) on CodePen.

4. Paragraph Typing Effect

Output:-

See the Pen Typing Effect by Asadabbas (@Asadabbas) on CodePen.

5. Typing effect with Pencil

Output:-

See the Pen Typing effect but with Pencil by Luis Pepen (@LuisPM) on CodePen.

6. Typing effect with Glowing Text Animation

Output:-

See the Pen Transmission: Glowing Text Animation by Stephen Scaff (@StephenScaff) on CodePen.

7. Change Typing Text Effect

Output:-

See the Pen Typing Effect by Coding Journey (@Coding_Journey) on CodePen.

8. Create Typing Animation Effects using JavaScript

Output:-

See the Pen Text Typing Animation by saqib kifayat (@lscsaqib) on CodePen.

9. Auto Typing Text Animation Effect (function)

Output:-

See the Pen Auto Typing Text (function) by Connor Gaunt (@ConnorGaunt) on CodePen.

10. Text Typing Thingamy

Output:-

See the Pen Text typing thingamy by Jack Armley (@jackarmley) on CodePen.

More!

See the Pen text animation effects by khushal (@mr__khushal) on CodePen.

See the Pen Animation text effects by khushal (@mr__khushal) on CodePen.

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

See the Pen typewriter by gavra (@gavra) on CodePen.

See the Pen Typing Effect by Van Huynh (@worksbyvan) on CodePen.


Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *