Amazing Text Animation Effect In CSS - [CODE]

Web Designs Feb 22, 2024 0 337 Add to Reading List

Here is an amazing animation effect that is made to look like a text error or character glitch, all done using HTML and CSS. Where you can now create an animated text effect using pure CSS. The subject matter may be different, it will be placed under the site logo if it matches the content. But most of all you can see these effects in the form of headings. After all, we need to put HTML in place, and here is a ready-made text animation.

As already mentioned, this animation for values was created using CSS only. Where we write down the signs that will initially be under the animation and install them in place. And as soon as we set the style for them, we immediately give your text an elegant look, or rather noticeable, so that when you open a website or blog, as well as a page, this effect will certainly be noticeable, which means it will attract attention, which is exactly what we need. Once you understand how everything works in a pure style, you can create some pretty original animated text effects.

To do this, below is a link that immediately when you go you will find not one or 2 effects, but a whole selection that can be used on the portal. Most of all, such a vision is used to attract attention, which means that if you need guests and users to accurately notice your text or description, then we lead everything with animation.

Installation:

HTML

Here is your Text

.anumasia_tekta{
  font-size:3rem;
  position:relative;
  line-height: 1.2;
  transform:scale(2, 4);
}  
.anumasia_tekta::before,
.anumasia_tekta::after{
  position:absolute;
  top:0;
  left:0;
  content:attr(data-text);
  background:var(--main-bg-color);
  clip:rect(0,0,0,0);
  width:100%;
}
.anumasia_tekta::before{
  animation:anumasia_tekta-2 3s 500 linear alternate-reverse;
  left:-2px;
  text-shadow: 1px 0 #fbe601, 2px 0 #eb3406;
}
.anumasia_tekta::after{
  animation:anumasia_tekta-1 2s 500 linear alternate-reverse;
  left:2px;
  text-shadow: 1px 0 #63c3ea, 2px 0 #2b30d1;
}
@-webkit-keyframes anumasia_tekta-1 {
  0% {
  clip: rect(25px, 600px, 4px, 0);
  }
  5.88235% {
  clip: rect(22px, 600px, 12px, 0);
  }
  11.76471% {
  clip: rect(44px, 600px, 20px, 0);
  }
  17.64706% {
  clip: rect(7px, 600px, 29px, 0);
  }
  23.52941% {
  clip: rect(13px, 600px, 18px, 0);
  }
  29.41176% {
  clip: rect(21px, 600px, 31px, 0);
  }
  35.29412% {
  clip: rect(17px, 600px, 20px, 0);
  }
  41.17647% {
  clip: rect(41px, 600px, 7px, 0);
  }
  47.05882% {
  clip: rect(43px, 600px, 2px, 0);
  }
  52.94118% {
  clip: rect(44px, 600px, 12px, 0);
  }
  58.82353% {
  clip: rect(44px, 600px, 22px, 0);
  }
  64.70588% {
  clip: rect(10px, 600px, 17px, 0);
  }
  70.58824% {
  clip: rect(31px, 600px, 13px, 0);
  }
  76.47059% {
  clip: rect(40px, 600px, 22px, 0);
  }
  82.35294% {
  clip: rect(16px, 600px, 30px, 0);
  }
  88.23529% {
  clip: rect(33px, 600px, 34px, 0);
  }
  94.11765% {
  clip: rect(9px, 600px, 40px, 0);
  }
  to {
  clip: rect(45px, 600px, 21px, 0);
  }
}
@keyframes anumasia_tekta-1 {
  0% {
  clip: rect(25px, 600px, 4px, 0);
  }
  5.88235% {
  clip: rect(22px, 600px, 12px, 0);
  }
  11.76471% {
  clip: rect(44px, 600px, 20px, 0);
  }
  17.64706% {
  clip: rect(7px, 600px, 29px, 0);
  }
  23.52941% {
  clip: rect(13px, 600px, 18px, 0);
  }
  29.41176% {
  clip: rect(21px, 600px, 31px, 0);
  }
  35.29412% {
  clip: rect(17px, 600px, 20px, 0);
  }
  41.17647% {
  clip: rect(41px, 600px, 7px, 0);
  }
  47.05882% {
  clip: rect(43px, 600px, 2px, 0);
  }
  52.94118% {
  clip: rect(44px, 600px, 12px, 0);
  }
  58.82353% {
  clip: rect(44px, 600px, 22px, 0);
  }
  64.70588% {
  clip: rect(10px, 600px, 17px, 0);
  }
  70.58824% {
  clip: rect(31px, 600px, 13px, 0);
  }
  76.47059% {
  clip: rect(40px, 600px, 22px, 0);
  }
  82.35294% {
  clip: rect(16px, 600px, 30px, 0);
  }
  88.23529% {
  clip: rect(33px, 600px, 34px, 0);
  }
  94.11765% {
  clip: rect(9px, 600px, 40px, 0);
  }
  to {
  clip: rect(45px, 600px, 21px, 0);
  }
}
@-webkit-keyframes anumasia_tekta-2 {
  0% {
  clip: rect(8px, 600px, 50px, 0);
  }
  5.88235% {
  clip: rect(40px, 600px, 41px, 0);
  }
  11.76471% {
  clip: rect(33px, 600px, 16px, 0);
  }
  17.64706% {
  clip: rect(41px, 600px, 9px, 0);
  }
  23.52941% {
  clip: rect(14px, 600px, 30px, 0);
  }
  29.41176% {
  clip: rect(22px, 600px, 33px, 0);
  }
  35.29412% {
  clip: rect(37px, 600px, 48px, 0);
  }
  41.17647% {
  clip: rect(25px, 600px, 37px, 0);
  }
  47.05882% {
  clip: rect(1px, 600px, 18px, 0);
  }
  52.94118% {
  clip: rect(19px, 600px, 27px, 0);
  }
  58.82353% {
  clip: rect(33px, 600px, 29px, 0);
  }
  64.70588% {
  clip: rect(2px, 600px, 38px, 0);
  }
  70.58824% {
  clip: rect(18px, 600px, 41px, 0);
  }
  76.47059% {
  clip: rect(19px, 600px, 45px, 0);
  }
  82.35294% {
  clip: rect(44px, 600px, 32px, 0);
  }
  88.23529% {
  clip: rect(13px, 600px, 43px, 0);
  }
  94.11765% {
  clip: rect(4px, 600px, 6px, 0);
  }
  to {
  clip: rect(30px, 600px, 25px, 0);
  }
}
@-keyframes anumasia_tekta-2 {
  0% {
  clip: rect(8px, 600px, 50px, 0);
  }
  5.88235% {
  clip: rect(40px, 600px, 41px, 0);
  }
  11.76471% {
  clip: rect(33px, 600px, 16px, 0);
  }
  17.64706% {
  clip: rect(41px, 600px, 9px, 0);
  }
  23.52941% {
  clip: rect(14px, 600px, 30px, 0);
  }
  29.41176% {
  clip: rect(22px, 600px, 33px, 0);
  }
  35.29412% {
  clip: rect(37px, 600px, 48px, 0);
  }
  41.17647% {
  clip: rect(25px, 600px, 37px, 0);
  }
  47.05882% {
  clip: rect(1px, 600px, 18px, 0);
  }
  52.94118% {
  clip: rect(19px, 600px, 27px, 0);
  }
  58.82353% {
  clip: rect(33px, 600px, 29px, 0);
  }
  64.70588% {
  clip: rect(2px, 600px, 38px, 0);
  }
  70.58824% {
  clip: rect(18px, 600px, 41px, 0);
  }
  76.47059% {
  clip: rect(19px, 600px, 45px, 0);
  }
  82.35294% {
  clip: rect(44px, 600px, 32px, 0);
  }
  88.23529% {
  clip: rect(13px, 600px, 43px, 0);
  }
  94.11765% {
  clip: rect(4px, 600px, 6px, 0);
  }
  to {
  clip: rect(30px, 600px, 25px, 0);
  }
}

This completes the installation!

I also recommend watching more animations for text. Where initially several options are presented that work similarly on pure CSS, where you can choose whether to match the dark or light format of the site.

If they are initially set to the wrong background, then each animation has a style assigned to it, so that with minimal knowledge you can change the shades of color.