How to do a CSS text Distortion

Here is a method to do a distortion or glitch effect to text in CSS.

This is done through the use of CSS web kit animation and key frames.

The basic CSS for the distortion text:

.distort-text {
    padding: 10px;
    animation: distort 400ms 10;
}

.distort-text:hover {
    animation: distort 400ms infinite;
}

@keyframes distort {
    0% {
        text-shadow: 5px 4px #f44336, -5px -6px #2196f3;
    }
    25% {
        text-shadow: -5px -6px #f44336, 5px 4px #2196f3;
    }
    50% {
        text-shadow: 5px -4px #f44336, -8px 4px #2196f3;
    }
    75% {
        text-shadow: -8px -4px #f44336, -5px -4px #2196f3;
    }
    100% {
        text-shadow: -5px 0 #f44336, 5px -4px #2196f3;
    }
}

.distort-text { 
 padding: 10px;
 animation: distort 400ms 10;
}

Implies that once the page is loaded the distort @keyframes will run for 10 times at a speed cycle of 4 seconds (400ms).

.distort-text:hover { 
  animation: distort 400ms infinite;
}

Makes the distort @keyframes run infinitely and at a speed of 4 seconds when the element (text) is hovered.

In the distort @keyframes we have it split into stages (0%, 25%, 50%, 75% and 100%) at each one of these stages we have defined CSS properties for when distort gets called.

text-shadow: 5px 4px #f44336, -5px -6px #2196f3;

Adds a text shadow with the position of the horizontal shadow at 5px and the vertical shadow at 4px. #f44336 is the color for this text ‘shadow’. Following the comma is another text shadow at -5px horizontal and -6px vertical with a color of #2196f3.

In essence our distort @keyframes just consists of many slightly different text shadow effects, which gets called and cycled through with the animation element.