CSS Glitch (Grunge) Animated Effects on Text Like Textrim Templates

A while ago, I have launched an update for Textrim free Blogger theme . One of the features in the latest version is a glitch or grunge effect on the text in the blog title and in the article title when it is highlighted (hover). The pros and cons, there are those who like it because it's a new thing, there are those who don't like it because it makes you dizzy. Everyone's taste is different. The important thing can be installed or removed as you wish.

You need to know, the moving animation effect is only made using CSS, you know. You don't need any Javascript. So it is definitely lightweight and supports AMP. If you want to try, igniel.com blog will share the code with all of you. This glitch is like a fast-shaking image, rich in the look of a broken old school TV.

Glitch (Grunge) Moving Text Effect with CSS Animation

We will create 2 types of glitch effects, namely:

1. Direct default
2. When highlighted (hover)

1. Direct Default

First, first add the CSS glitch code to create a moving animation effect. Copy the following code and save it in HTML settings.

/* Text Glitch (Grunge) Effect by igniel.com */
.ignielGlitch {
  color: #000;
  position: relative;
  animation: ignielGlitch1 2.5s infinite;
  -moz-animation: ignielGlitch1 2.5s infinite;
  -webkit-animation: ignielGlitch1 2.5s infinite;
  -o-animation: ignielGlitch1 2.5s infinite;
}
.ignielGlitch:before,  .ignielGlitch:after {
  content: attr(data-text);
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.ignielGlitch:before {
  color: #000;
  animation: ignielGlitch2 2.5s infinite;
  -moz-animation: ignielGlitch2 2.5s infinite;
  -webkit-animation: ignielGlitch2 2.5s infinite;
  -o-animation: ignielGlitch2 2.5s infinite;
}
.ignielGlitch:after {
  color: #000;
  animation: ignielGlitch3 2.5s infinite;
  -moz-animation: ignielGlitch3 2.5s infinite;
  -webkit-animation: ignielGlitch3 2.5s infinite;
  -o-animation: ignielGlitch3 2.5s infinite;
}
@keyframes ignielGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@-webkit-keyframes ignielGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@keyframes ignielGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes ignielGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@keyframes ignielGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes ignielGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}

Marked 2.5sis the speed at which the glitch effect moves. The bigger the number, the slower the motion. Please change according to taste.

You can add other settings such as font size, font type, font thickness, and so on.

After that, we create a new HTML element to invoke the glitch effect. Make sure to add a class ignielGlitchto it. Examples like this:

<!-- Text Glitch (Grunge) Effect by igniel.com -->
<div class="ignielGlitch" data-text="Textrim">Textrim</div>

- Marked data-text = "Textrim"MANDATORY must be added. The content or value must match the text you want to display. In the code above, the contents of the div element are Textrim. Then the data-text value must also be filled Textrim.
- Marked# 000is the text color. The three of them can be arranged differently so that the shadows that arise are even more colorful.

1.1. Demo / Preview

If successful, the result will be like this.

TEXTRIM

IGNIEL

2. When Highlighted (Hover)

This text glitch / grunge effect on hover will only appear when the mouse is highlighting the text. The CSS code is as follows:

/* Text Glitch (Grunge) Effect on Hover by igniel.com */
.ignielGlitch:hover {
  color: #000;
  position: relative;
  animation: ignielGlitch1 2.5s infinite;
  -moz-animation: ignielGlitch1 2.5s infinite;
  -webkit-animation: ignielGlitch1 2.5s infinite;
  -o-animation: ignielGlitch1 2.5s infinite;
}
.ignielGlitch:hover::before,  .ignielGlitch:hover::after {
  content: attr(data-text);
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.ignielGlitch:hover::before {
  color: #000;
  animation: ignielGlitch2 2.5s infinite;
  -moz-animation: ignielGlitch2 2.5s infinite;
  -webkit-animation: ignielGlitch2 2.5s infinite;
  -o-animation: ignielGlitch2 2.5s infinite;
}
.ignielGlitch:hover::after {
  color: #000;
  animation: ignielGlitch3 2.5s infinite;
  -moz-animation: ignielGlitch3 2.5s infinite;
  -webkit-animation: ignielGlitch3 2.5s infinite;
  -o-animation: ignielGlitch3 2.5s infinite;
}
@keyframes ignielGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@-webkit-keyframes ignielGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@keyframes ignielGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes ignielGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@keyframes ignielGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes ignielGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}

For speed and color settings be markednothing is different. Everything is the same as the first version.

Then the HTML code is the same. Thatbe marked the value must match the text content in the div element.

<!-- Text Glitch (Grunge) Effect on Hover by igniel.com -->
<div class="ignielGlitch" data-text="Textrim">Textrim</div>

2.1. Demo / Preview

This time I tried to distinguish the colors so that the resulting shadow effect was more colorful.

HOVER ME

HIGHLIGHT ME

Alright. Now you can create a CSS animated grunge glitch text effect like Igniel in the Textrim template. Only use what is necessary. Because if most of it makes the reader dizzy.