<!--
  Inspired by Mary Lou's post at Codrops
  https://tympanus.net/codrops/2017/12/21/css-glitch-effect/
-->
<html>
	<head>
		<title>Glitch</title>
		<meta name="viewport" content="initial-scale=1">
		<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap" rel="stylesheet">
	</head>

	<body>
		<div id="hero">
			<h1>GLITCH</h1>
			<h1>GLITCH</h1>
			<h1>GLITCH</h1>
			<h1>GLITCH</h1>
			<h1>GLITCH</h1>
		</div>
	</body>
</html>
:root {
  font-size: 300%;
  --glitch-duration: 3s;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  background: lightgreen;
  position: absolute;
  top: 0;
  left: 0;
}

#hero {
  position: relative;
  width: 100%;
  height: 100%;
  background: #171515;
  color: white;
  font-family: 'Oswald', sans-serif;
}

#hero > h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
} #hero > h1::before {
  content: 'GLITCH';
  position: absolute;
  left: 3px;
  color: red;
  opacity: 1;
  z-index: -1;
} #hero > h1::after {
  content: 'GLITCH';
  position: absolute;
  left: 2px;
  color: blue;
  opacity: 1;
  z-index: -1;
}

#hero > h1:nth-child(1) {
  animation: glitch1 var(--glitch-duration) infinite steps(1, end);
}
#hero > h1:nth-child(2) {
  animation: glitch2 var(--glitch-duration) infinite steps(1, end);
}
#hero > h1:nth-child(3) {
  animation: glitch3 var(--glitch-duration) infinite steps(1, end);
}
#hero > h1:nth-child(4) {
  animation: glitch4 var(--glitch-duration) infinite steps(1, end);
}
#hero > h1:nth-child(5) {
  animation: glitch5 var(--glitch-duration) infinite steps(1, end);
}

@keyframes glitch1 {
  20% {
    clip-path: polygon(0 0%, 100% 0%, 100% 33%, 0 33%);
    transform: translate(-50%, -50%);
  }
  30% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100%, 0);
    transform: translate(-50%, -50%);
  }
  47% {
    transform: translate(-45%, -45%);
  }
  48% {
    transform: translate(-50%, -50%);
  }
  49% {
    transform: translate(-55%, -45%);
  }
  50% {
    transform: translate(-50%, -50%);
  }
}

@keyframes glitch2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0% 60%);
    transform: translate(-50%, -50%);
  }
  21% {
    transform: translate(-46%, -46%);
  }
  22% {
    transform: translate(-54%, -54%);
  }
  30% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100%, 0);
    transform: translate(-50%, -50%);
  }
  35% {
    transform: translate(-45%, -55%);
  }
  36% {
    transform: translate(-50%, -50%);
  }
  37% {
    transform: translate(-40%, -45%);
  }
  38% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-45%, -55%);
  }
  51% {
    transform: translate(-50%, -60%);
  }
  52% {
    transform: translate(-45%, -50%);
  }
  53% {
    transform: translate(-50%, -50%);
  }
  71% {
    transform: translate(-40%, -60%);
  }
  72% {
    transform: translate(-45%, -50%);
  }
  73% {
    transform: translate(-40%, -50%);
  }
  77% {
    transform: translate(-50%, -50%);
  }
}

@keyframes glitch3 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0% 100%);
    transform: translate(-50%, -50%);
  }
  30% {
    transform: translate(-40%, -40%);
  }
  31%{
    transform: translate(-50%, -50%); 
  }
  35% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100%, 0);
    transform: translate(-50%, -50%);
  }
  45% {
    transform: translate(-60%, -60%);
  }
  46%{
    transform: translate(-50%, -50%); 
  }
  47% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100%, 0);
    transform: translate(-50%, -50%);
  }
  69% {
    transform: translate(-40%, -40%);
  }
  71% {
    transform: translate(-50%, -50%); 
  }
}

@keyframes glitch4 {
  0% {
    opacity: 0;
  }
  22% {
    opacity: 1;
    clip-path: polygon(0 32%, 100% 32%, 100% 41%, 0% 41%);
    transform: translate(-48%, -50%);
  }
  24% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100%, 0);
    transform: translate(-50%, -50%);
  }
}

@keyframes glitch5 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    clip-path: polygon(0 59%, 100% 59%, 100% 71%, 0% 71%);
    transform: translate(-52%, -50%);
  }
  25% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100%, 0);
    transform: translate(-50%, -50%);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.