Problem description

Given an HTML page containing a single <h1 class="glitch">Glitch Text</h1> element, write CSS to:

• Position .glitch as relative and set a fallback font style.

• Use ::before and ::after pseudo-elements to duplicate the text content (via content: attr(data-text)), absolutely positioned over the original.

• Style the pseudo-elements with text-shadow offsets in red and cyan to simulate color channel separation.

• Define a @keyframes glitchShift animation that at multiple percentages:

  • Applies small horizontal transform: translateX(...) shifts.

  • Adjusts clip-path: inset(...) to show random slices of text.

• Apply glitchShift to ::before with 2s steps(2, end) infinite and to ::after with 2s steps(3, end) infinite, offset by different animation-delay values.

Goal

Animate the <h1> so it flickers with intermittent horizontal shifts, colored channel offsets, and random text slices, creating a convincing glitch effect without JavaScript.

Constraints

• Use only CSS (no JavaScript).

• Base element should be <h1 class="glitch" data-text="Glitch Text">Glitch Text</h1>.

• Pseudo-elements must use content: attr(data-text).

• Text-shadow colors should be #f00 for ::before and #0ff for ::after.

• Keyframes glitchShift must include at least five distinct stops (e.g., 0%, 20%, 40%, 60%, 80%, and 100%), each with different transform and clip-path values.

• Animation durations should be 2s; timing functions should be steps(2) for ::before and steps(3) for ::after; infinite iteration.

• Use different animation-delay for each pseudo-element to desynchronize effects (e.g., 0s, -1s).

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.