Pure CSS Text Glitch Animation

byCodingFlicks -December 16, 2021

0

CSS animation is a magic box from which to create many beautiful animations. Today's CSS Text Glitch Animation is a unique example of that. Without using complex JavaScript or plugins, you can create very good animations just by using various CSS properties. In this blog post, we'll create a CSS text animation that has a glitch effect. Our website includes snippets of CSS animations, complete website designs, JavaScript plugin implementations, bootstrap projects, and more. If you want to collect the snippets, click on the Load More button at the bottom of our website homepage. The video tutorial below shows the process of creating this text effect.

Video Tutorial:

We hope you have watched the video tutorial on CSS text Animation. CSS animation is now widely used in every sector of web design. It is popular among developers due to its ease of use, cross-browser compatibility, accessibility, etc. With CSS we can create many beautiful animations. In this project, we demonstrated how to give text a glitch animation using HTML and CSS. Text glitch animations are used in creative web design, artistic expression, tech and gaming industries, promotional materials, music and entertainment industries, etc.

In this snippet, we've taken a div and named it 'wrapper'. We take another div inside and put a random text in it. We have taken the same text as data-text. In the CSS part, we first give the body element a background image with opacity. We then used the CSS flexbox property to bring the parent div to the center of the viewport. Then we set an animation property for the text element. Then we set separate animation properties for the pseudo-element (before and after) of the text element. We then used the CSS transform and CSS clip properties in the CSS keyframe animation to complete the text glitch animation.

You may like this:

Pure CSS Text Glitch Animation [ Source Code ]:

First, create one HTML file with a .html extension and then create a CSS file with a .css extension. connect the external CSS file with HTML. Please copy the code from the code boxes below paste it into your project and save it. If you face any problem then you can download the code from the download button below this blog post.

ADD HTML:

  <!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
	<meta charset="UTF-8">
	<title>Pure CSS Text Glitch Effect</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div id="wrapper">
		<div class="content" data-text="GLITCH EFFECT">
			GLITCH EFFECT
		</div>
	</div>
</body>
</html>

ADD CSS:

  * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	background: linear-gradient(to left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	font-family: 'Montserrat', sans-serif;
	margin: 0;
	padding: 0;
}
#wrapper {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
}
.content {
	position: relative;
	color: #fff;
	font-size: 100px;
	font-weight: 900;
	letter-spacing: 2px;
	text-align: center;
	animation: text-ani 1.5s linear infinite alternate-reverse;
}
.content::before, .content::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #000;
	content: attr(data-text);
}
.content::before {
	left: -3px;
	text-shadow: -10px 0 red;
	animation: ani-1 1.5s linear infinite alternate-reverse;
}
.content::after {
	left: 3px;
	text-shadow: -10px 0 green;
	animation: ani-2 1.5s linear infinite alternate-reverse;
}
@keyframes text-ani {
	0% {
		transform: skew(-2deg);
	}
	40% {
		transform: skew(2deg);
	}
	45% {
		transform: skew(-2deg);
	}
	50% {
		transform: skew(2deg);
	}
	100% {
		transform: skew(-2deg);
	}
}
@keyframes ani-1 {
	0% {
		clip: rect(80px, auto, 85px, 10px);
	}
	5% {
		clip: rect(84px, auto, 118px, 10px);
	}
	10% {
		clip: rect(22px, auto, 83px, 10px);
	}
	15% {
		clip: rect(15px, auto, 15px, 10px);
	}
	20% {
		clip: rect(116px, auto, 89px, 10px);
	}
	25% {
		clip: rect(95px, auto, 122px, 10px);
	}
	30% {
		clip: rect(108px, auto, 10px, 10px);
	}
	35% {
		clip: rect(118px, auto, 76px, 10px);
	}
	40% {
		clip: rect(53px, auto, 46px, 10px);
	}
	45% {
		clip: rect(131px, auto, 121px, 10px);
	}
	50% {
		clip: rect(79px, auto, 68px, 10px);
	}
	55% {
		clip: rect(40px, auto, 108px, 10px);
	}
	60% {
		clip: rect(25px, auto, 94px, 10px);
	}
	65% {
		clip: rect(125px, auto, 119px, 10px);
	}
	70% {
		clip: rect(59px, auto, 87px, 10px);
	}
	75% {
		clip: rect(70px, auto, 69px, 10px);
	}
	80% {
		clip: rect(109px, auto, 67px, 10px);
	}
	85% {
		clip: rect(29px, auto, 96px, 10px);
	}
	90% {
		clip: rect(41px, auto, 53px, 10px);
	}
	95% {
		clip: rect(110px, auto, 37px, 10px);
	}
	100% {
		clip: rect(90px, auto, 92px, 10px);
	}
}
@keyframes ani-2 {
	0% {
		clip: rect(73px, auto, 132px, 10px);
	}
	5% {
		clip: rect(126px, auto, 60px, 10px);
	}
	10% {
		clip: rect(119px, auto, 28px, 10px);
	}
	15% {
		clip: rect(154px, auto, 40px, 10px);
	}
	20% {
		clip: rect(87px, auto, 64px, 10px);
	}
	25% {
		clip: rect(55px, auto, 19px, 10px);
	}
	30% {
		clip: rect(105px, auto, 115px, 10px);
	}
	35% {
		clip: rect(28px, auto, 95px, 10px);
	}
	40% {
		clip: rect(99px, auto, 27px, 10px);
	}
	45% {
		clip: rect(160px, auto, 30px, 10px);
	}
	50% {
		clip: rect(46px, auto, 102px, 10px);
	}
	55% {
		clip: rect(26px, auto, 106px, 10px);
	}
	60% {
		clip: rect(123px, auto, 8px, 10px);
	}
	65% {
		clip: rect(155px, auto, 123px, 10px);
	}
	70% {
		clip: rect(29px, auto, 118px, 10px);
	}
	75% {
		clip: rect(43px, auto, 24px, 10px);
	}
	80% {
		clip: rect(129px, auto, 67px, 10px);
	}
	85% {
		clip: rect(101px, auto, 127px, 10px);
	}
	90% {
		clip: rect(121px, auto, 0px, 10px);
	}
	95% {
		clip: rect(110px, auto, 84px, 10px);
	}
	100% {
		clip: rect(19px, auto, 112px, 10px);
	}
}

We hope you have got the code. We regularly share source code on this website. If you would like to receive notifications, please follow us on our social media profiles. Also please share the articles of this blog and help us to grow. Share your thoughts about the snippet in the comment box below. Thank you for visiting the blog.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.