CSS Animation Example: The Glitch

"The Glitch" is an intense, cyberpunk-inspired visual technique involving erratic chromatic aberration to indicate a digital fracture.

ERROR

This is arguably the most complex text effect here in this list of CSS animation examples, utilizing several layers of CSS tricks. First, we use a custom HTML data-text attribute to mirror the original string. We then capture that string using the attr() function inside CSS for both the ::before and ::after pseudo-elements, layering them exactly on top.

We subtly offset the pseudo-elements mathematically (e.g., left: 2px vs left: -2px) and apply contrasting text-shadow colors (usually red and blue) to create chromatic aberration.

Finally, the most critical part is the @keyframes using the clip-path property with the inset() function. By haphazardly animating random slicing windows across the text, we simulate video scanline tears.

Here is the code to create The Glitch animation.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #111; /* Dark theme looks best */
}

/* Base text */
.glitch {
    font-size: 5rem;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    color: white;
}

/* Define the pseudo-elements that will animate on top of the original */
.glitch::before,
.glitch::after {
    content: attr(data-text); /* Pull the text from the HTML attribute */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Red channel shifting left */
.glitch::before {
    left: 2px;
    text-shadow: -2px 0 red;
    background: #111;
    overflow: hidden;
    animation: noise-anim 2s infinite linear alternate-reverse;
}

/* Blue channel shifting right */
.glitch::after {
    left: -2px;
    text-shadow: -2px 0 blue;
    background: #111;
    overflow: hidden;
    animation: noise-anim-2 3s infinite linear alternate-reverse;
}

/* Complex keyframes offsetting the clip-path height */
@keyframes noise-anim {
    0% { clip-path: inset(40% 0 61% 0); }
    20% { clip-path: inset(92% 0 1% 0); }
    40% { clip-path: inset(43% 0 1% 0); }
    60% { clip-path: inset(25% 0 58% 0); }
    80% { clip-path: inset(54% 0 7% 0); }
    100% { clip-path: inset(58% 0 43% 0); }
}

@keyframes noise-anim-2 {
    0% { clip-path: inset(26% 0 14% 0); }
    20% { clip-path: inset(21% 0 41% 0); }
    40% { clip-path: inset(6% 0 48% 0); }
    60% { clip-path: inset(80% 0 15% 0); }
    80% { clip-path: inset(5% 0 79% 0); }
    100% { clip-path: inset(91% 0 7% 0); }
}

@media (prefers-reduced-motion: reduce) {
    .glitch::before,
    .glitch::after {
        display: none; /* Instantly removes the flashing glitch overlays */
    }
}
</style>

<div class="glitch" data-text="ERROR">ERROR</div>

View Output

Accessibility Considerations

The flashing, erratic frequency of this animation runs a high risk of triggering seizures in photosensitive individuals or causing immense distraction. prefers-reduced-motion is a CSS media feature used to detect if a user has enabled a setting on their device to minimize the amount of non-essential animation or motion. You must respect it here by forcibly turning it off for those who have enabled this setting.

The cleanest way to disable it is to simply purge the pseudo-elements governing the effect by using display: none.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .glitch::before,
    .glitch::after {
        /* Removes the tearing glitch elements entirely */
        display: none; 
    }
}