Best way to Text Animation Effect Using CSS Text Blinking Effect CSS

In this blog, You can learn how to create text blinking effect using CSS. There I use CSS keyframes animation for text blinking effect.

Video tutorial of how to create text blinking effect using CSS. There I use CSS keyframes animation for text blinking effect.

This tutorial video can help you to create text blinking effect using CSS. There I use CSS keyframes animation for text blinking effect.

Text Animation Effect Using CSS | Text Blinking Effect CSS[Source Codes]

This source code can help you to create text blinking effect using CSS

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Norican&display=swap" rel="stylesheet">
</head>
<body>
	<div class="text-blinking">
		<span>I</span>
		<span>n</span>
		<span>v</span>
		<span>e</span>
		<span>n</span>
		<span>t</span>
		<span>i</span>
		<span>o</span>
		<span>n</span>
		 
		<span>T</span>
		<span>r</span>
		<span>i</span>
		<span>c</span>
		<span>k</span>
		<span>s</span>
	</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #01050d;
	color: #000;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content:center;
}

.text-blinking{
	font-family: 'Norican', cursive;
	font-size: 130px;
	color: #1a3470;
}
.text-blinking span{
	animation:TextBlinking 3s;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}
.active{
	color: #0080ff;
	text-shadow: 0px 0px 20px #0652ff, 
	0px 0px 30px #0652ff, 
	0px 0px 40px #0652ff,
	0px 0px 50px #0652ff;
}
.text-blinking span:nth-child(1){animation-delay: 0s;}
.text-blinking span:nth-child(2){animation-delay: 0.2s;}
.text-blinking span:nth-child(3){animation-delay: 0.4s;}
.text-blinking span:nth-child(4){animation-delay: 0.6s;}
.text-blinking span:nth-child(5){animation-delay: 0.8s;}
.text-blinking span:nth-child(6){animation-delay: 1s;}
.text-blinking span:nth-child(7){animation-delay: 1.2s;}
.text-blinking span:nth-child(8){animation-delay: 1.4s;}
.text-blinking span:nth-child(9){animation-delay: 1.6s;}
.text-blinking span:nth-child(10){animation-delay: 1.8s;}
.text-blinking span:nth-child(11){animation-delay: 2s;}
.text-blinking span:nth-child(12){animation-delay: 2.2s;}
.text-blinking span:nth-child(13){animation-delay: 2.4s;}
.text-blinking span:nth-child(14){animation-delay: 2.6s;}
.text-blinking span:nth-child(15){animation-delay: 2.8s;}


@keyframes TextBlinking{
	0%{
		color: #1a3470;
		text-shadow: none;
	}
	4%{
		color: #0080ff;
		text-shadow: 0px 0px 20px #0652ff, 
		0px 0px 30px #0652ff, 
		0px 0px 40px #0652ff,
		0px 0px 50px #0652ff;
	}
	5%{
		color: #1a3470;
		text-shadow: none;
	}
	100%{
		color: #1a3470;
		text-shadow: none;
	}

}