This post contains a total of 10+ CSS Text Glitch Effect Examples with Source Code. All these Text Glitch Effects are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Text Glitch Effect Examples
1. Text Glitch
Made by CamelCasingGod. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body, html {
width: 100%;
height: 100%;
overflow: hidden;
background-color: black;
}
.content{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.content .text{
position: relative;
color: #fff;
font-weight: 700;
font-size: 45px;
transform: scale(2);
padding: 30px;
letter-spacing: 2px;
text-transform: uppercase;
}
.content .text:before,
.content .text:after {
padding: 30px;
color: white;
content: attr(data-text);
position: absolute;
width: 100%;
height: 100%;
background: black;
overflow: hidden;
top: 0;
}
.content .text:before{
left: 3px;
text-shadow: -2px 0 red;
animation: glitch-1 2s linear infinite reverse;
}
.content .text:after{
left: -3px;
text-shadow: -2px 0 blue;
animation: glitch-2 2s linear infinite reverse;
}
@keyframes glitch-1 {
0% {
clip: rect(132px, auto, 101px, 30px);
}
5% {
clip: rect(17px, auto, 94px, 30px);
}
10% {
clip: rect(40px, auto, 66px, 30px);
}
15% {
clip: rect(87px, auto, 82px, 30px);
}
20% {
clip: rect(137px, auto, 61px, 30px);
}
25% {
clip: rect(34px, auto, 14px, 30px);
}
30% {
clip: rect(133px, auto, 74px, 30px);
}
35% {
clip: rect(76px, auto, 107px, 30px);
}
40% {
clip: rect(59px, auto, 130px, 30px);
}
45% {
clip: rect(29px, auto, 84px, 30px);
}
50% {
clip: rect(22px, auto, 67px, 30px);
}
55% {
clip: rect(67px, auto, 62px, 30px);
}
60% {
clip: rect(10px, auto, 105px, 30px);
}
65% {
clip: rect(78px, auto, 115px, 30px);
}
70% {
clip: rect(105px, auto, 13px, 30px);
}
75% {
clip: rect(15px, auto, 75px, 30px);
}
80% {
clip: rect(66px, auto, 39px, 30px);
}
85% {
clip: rect(133px, auto, 73px, 30px);
}
90% {
clip: rect(36px, auto, 128px, 30px);
}
95% {
clip: rect(68px, auto, 103px, 30px);
}
100% {
clip: rect(14px, auto, 100px, 30px);
}
}
@keyframes glitch-2 {
0% {
clip: rect(129px, auto, 36px, 30px);
}
5% {
clip: rect(36px, auto, 4px, 30px);
}
10% {
clip: rect(85px, auto, 66px, 30px);
}
15% {
clip: rect(91px, auto, 91px, 30px);
}
20% {
clip: rect(148px, auto, 138px, 30px);
}
25% {
clip: rect(38px, auto, 122px, 30px);
}
30% {
clip: rect(69px, auto, 54px, 30px);
}
35% {
clip: rect(98px, auto, 71px, 30px);
}
40% {
clip: rect(146px, auto, 34px, 30px);
}
45% {
clip: rect(134px, auto, 43px, 30px);
}
50% {
clip: rect(102px, auto, 80px, 30px);
}
55% {
clip: rect(119px, auto, 44px, 30px);
}
60% {
clip: rect(106px, auto, 99px, 30px);
}
65% {
clip: rect(141px, auto, 74px, 30px);
}
70% {
clip: rect(20px, auto, 78px, 30px);
}
75% {
clip: rect(133px, auto, 79px, 30px);
}
80% {
clip: rect(78px, auto, 52px, 30px);
}
85% {
clip: rect(35px, auto, 39px, 30px);
}
90% {
clip: rect(67px, auto, 70px, 30px);
}
95% {
clip: rect(71px, auto, 103px, 30px);
}
100% {
clip: rect(83px, auto, 40px, 30px);
}
}
</style>
</head>
<body>
<div class="content">
<h1 class="text" data-text="Ameya">
Ameya</h1>
</div>
</body>
</html>
2. Dab on em
Made by XING LEI. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
<style>
body {
background-color: #111;
}
.container {
width: 340px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.font,
.main,
.glitch:before,
.glitch:after {
font-family: 'Oswald', sans-serif;
font-size: 12rem;
line-height: 11rem;
text-align: center;
}
.text,
.glitch {
width: 100%;
height: 100%;
}
.main {
position: relative;
color: rgba(255,255,255,0.2);
background-image: url("http://i.giphy.com/3o6Mb4ZTsllteGKWVq.gif");
background-size: cover;
background-position: center center;
-webkit-background-clip: text;
-webkit-animation: noise-3 1.8s ease-out infinite;
animation: noise-3 1.8s ease-out infinite;
}
.glitch {
display: block;
position: absolute;
top: 0;
left: 0;
}
.glitch:before {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
color: rgba(255,0,0,0.5);
transform: scale(0.95) translateX(2px);
-webkit-animation: noise-2 2s ease-out infinite;
animation: noise-2 2s ease-out infinite;
}
.glitch:after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
color: rgba(0,0,255,0.5);
transform: scale(0.95) translateX(2px);
-webkit-animation: noise 3s ease-in infinite;
animation: noise 3s ease-in infinite;
}
@-webkit-keyframes noise {
0%, 9.5%, 10.2%, 70%, 72%, 89%, 90%, 100% {
transform: scaleY(1) translateX(2px);
z-index: 0;
}
10% {
transform: scaleX(1.2) translateX(5px) translateY(10px);
z-index: 0;
}
71.5% {
transform: scaleX(1.25) translateX(-20px);
z-index: 1;
}
}
@keyframes noise {
0%, 9.5%, 10.2%, 70%, 72%, 89%, 90%, 100% {
transform: scaleY(1) translateX(2px);
z-index: 0;
}
10% {
transform: scaleX(1.2) translateX(5px) translateY(10px);
z-index: 0;
}
71.5% {
transform: scaleX(1.25) translateX(-20px);
z-index: 1;
}
}
@-webkit-keyframes noise-2 {
0%, 9.5%, 10.2%, 70%, 72%, 89%, 90%, 100% {
transform: scaleY(1) translateX(-2px);
z-index: 0;
}
10% {
transform: scaleX(1.2) translateX(-5px);
z-index: 0;
}
71.5% {
transform: scaleX(1.3) translateX(30px);
z-index: 1;
}
}
@keyframes noise-2 {
0%, 9.5%, 10.2%, 70%, 72%, 89%, 90%, 100% {
transform: scaleY(1) translateX(-2px);
z-index: 0;
}
10% {
transform: scaleX(1.2) translateX(-5px);
z-index: 0;
}
71.5% {
transform: scaleX(1.3) translateX(30px);
z-index: 1;
}
}
@-webkit-keyframes noise-3 {
0%, 9.5%, 10.2%, 71%, 72%, 100% {
transform: scaleY(1);
}
10% {
transform: scaleX(1.1);
}
71.8% {
transform: scaleX(1.2);
}
}
@keyframes noise-3 {
0%, 9.5%, 10.2%, 71%, 72%, 100% {
transform: scaleY(1);
}
10% {
transform: scaleX(1.1);
}
71.8% {
transform: scaleX(1.2);
}
}
</style>
</head>
<body>
<div class="container">
<div class="glitch" data-text="DAB ON 'EM"></div>
<div class="main">DAB ON 'EM</div>
</div>
</body>
</html>
3. Psycho Glitch (CSS variables & @keyframes)
Made by Alex Nozdriukhin. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title>CodePen - Psycho Glitch (CSS variables & @keyframes)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url("https://fonts.googleapis.com/css?family=Bungee+Shade");
:root {
--f-size: 15;
--f-unit: 1vmin;
--f: calc(var(--f-size) * var(--f-unit));
--bg: #181717;
}
*, *::after, *::before {
box-sizing: border-box;
}
body {
font-family: "Bungee Shade", cursive;
font-size: var(--f);
background-color: var(--bg);
display: flex;
min-height: 100vh;
margin: 0;
overflow: hidden;
}
p {
flex: 1;
line-height: 0.75;
margin: auto;
color: #1af0dc;
text-align: center;
transform: scaleX(var(--scale, 1));
animation: glitch-p 11s infinite alternate;
}
p::before, p::after {
--top: 0;
--left: 0;
--v-height: 30%;
--n-tenth: calc(var(--f-size) * .1 * var(--top));
--t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
--b-cut: calc(var(--t-cut) + var(--v-height));
content: attr(data-text);
position: absolute;
width: 100%;
left: 0;
text-align: center;
transform: translateX(calc(var(--left) * 100%));
filter: drop-shadow(0 0 transparent);
text-shadow: calc(var(--left) * -3em) 0 0.02em lime, calc(var(--left) * -6em) 0 0.02em #ff00e1;
background-color: var(--bg);
clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut));
}
p::before {
animation: glitch-b 1.7s infinite alternate-reverse;
}
p::after {
animation: glitch-a 3.1s infinite alternate;
}
@keyframes glitch-p {
17% {
--scale: .87;
}
31% {
--scale: 1.1;
}
37% {
--scale: 1.3;
}
47% {
--scale: .91;
}
87% {
--scale: 1;
}
}
@keyframes glitch-a {
10%, 30%, 50%, 70%, 90% {
--top: 0;
--left: 0;
}
0% {
--v-height: 15%;
}
20% {
--left: .005;
}
40% {
--left: .01;
--v-height: 20%;
--top: 3;
}
60% {
--left: .03;
--v-height: 25%;
--top: 6;
}
80% {
--left: .07;
--v-height: 5%;
--top: 8;
}
100% {
--left: .083;
--v-height: 30%;
--top: 1;
}
}
@keyframes glitch-b {
10%, 30%, 50%, 70%, 90% {
--top: 0;
--left: 0;
}
0% {
--v-height: 15%;
--top: 10;
}
20% {
--left: -.005;
}
40% {
--left: -.01;
--v-height: 17%;
--top: 3;
}
60% {
--left: -.03;
--v-height: 35%;
--top: 6;
}
80% {
--left: -.07;
--v-height: 5%;
--top: 8;
}
100% {
--left: -.083;
--v-height: 30%;
--top: 1;
}
}
</style>
</head>
<body>
<p data-text="PSYCHO">PSYCHO</p>
</body>
</html>
4. Glitch text effect
Made by SHM. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Archivo+Black');
html,
body {
height: 100%;
}
body {
background: #ccc;
font-family: 'Archivo Black', sans-serif;
}
.glitch-wrapper {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.glitch {
color: black;
font-size: 150px;
text-transform: upercase;
position: relative;
display: inline-block;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
left: 2px;
text-shadow: -2px 0 #49FC00;
clip: rect(24px, 550px, 90px, 0);
-webkit-animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: -2px 0 #b300fc;
clip: rect(85px, 550px, 140px, 0);
-webkit-animation: glitch-anim 2.5s infinite linear alternate-reverse;
animation: glitch-anim 2.5s infinite linear alternate-reverse;
}
@-webkit-keyframes glitch-anim {
0% {
clip: rect(110px, 9999999px, 74px, 0);
}
4.16666667% {
clip: rect(135px, 9999999px, 143px, 0);
}
8.33333333% {
clip: rect(100px, 9999999px, 100px, 0);
}
12.5% {
clip: rect(38px, 9999999px, 24px, 0);
}
16.66666667% {
clip: rect(125px, 9999999px, 83px, 0);
}
20.83333333% {
clip: rect(149px, 9999999px, 63px, 0);
}
25% {
clip: rect(12px, 9999999px, 104px, 0);
}
29.16666667% {
clip: rect(68px, 9999999px, 7px, 0);
}
33.33333333% {
clip: rect(77px, 9999999px, 20px, 0);
}
37.5% {
clip: rect(99px, 9999999px, 6px, 0);
}
41.66666667% {
clip: rect(27px, 9999999px, 99px, 0);
}
45.83333333% {
clip: rect(58px, 9999999px, 107px, 0);
}
50% {
clip: rect(108px, 9999999px, 77px, 0);
}
54.16666667% {
clip: rect(58px, 9999999px, 87px, 0);
}
58.33333333% {
clip: rect(142px, 9999999px, 112px, 0);
}
62.5% {
clip: rect(124px, 9999999px, 125px, 0);
}
66.66666667% {
clip: rect(61px, 9999999px, 53px, 0);
}
70.83333333% {
clip: rect(117px, 9999999px, 74px, 0);
}
75% {
clip: rect(21px, 9999999px, 74px, 0);
}
79.16666667% {
clip: rect(117px, 9999999px, 70px, 0);
}
83.33333333% {
clip: rect(87px, 9999999px, 122px, 0);
}
87.5% {
clip: rect(95px, 9999999px, 9px, 0);
}
91.66666667% {
clip: rect(121px, 9999999px, 75px, 0);
}
95.83333333% {
clip: rect(121px, 9999999px, 115px, 0);
}
100% {
clip: rect(101px, 9999999px, 72px, 0);
}
}
@-o-keyframes glitch-anim {
0% {
clip: rect(110px, 9999999px, 74px, 0);
}
4.16666667% {
clip: rect(135px, 9999999px, 143px, 0);
}
8.33333333% {
clip: rect(100px, 9999999px, 100px, 0);
}
12.5% {
clip: rect(38px, 9999999px, 24px, 0);
}
16.66666667% {
clip: rect(125px, 9999999px, 83px, 0);
}
20.83333333% {
clip: rect(149px, 9999999px, 63px, 0);
}
25% {
clip: rect(12px, 9999999px, 104px, 0);
}
29.16666667% {
clip: rect(68px, 9999999px, 7px, 0);
}
33.33333333% {
clip: rect(77px, 9999999px, 20px, 0);
}
37.5% {
clip: rect(99px, 9999999px, 6px, 0);
}
41.66666667% {
clip: rect(27px, 9999999px, 99px, 0);
}
45.83333333% {
clip: rect(58px, 9999999px, 107px, 0);
}
50% {
clip: rect(108px, 9999999px, 77px, 0);
}
54.16666667% {
clip: rect(58px, 9999999px, 87px, 0);
}
58.33333333% {
clip: rect(142px, 9999999px, 112px, 0);
}
62.5% {
clip: rect(124px, 9999999px, 125px, 0);
}
66.66666667% {
clip: rect(61px, 9999999px, 53px, 0);
}
70.83333333% {
clip: rect(117px, 9999999px, 74px, 0);
}
75% {
clip: rect(21px, 9999999px, 74px, 0);
}
79.16666667% {
clip: rect(117px, 9999999px, 70px, 0);
}
83.33333333% {
clip: rect(87px, 9999999px, 122px, 0);
}
87.5% {
clip: rect(95px, 9999999px, 9px, 0);
}
91.66666667% {
clip: rect(121px, 9999999px, 75px, 0);
}
95.83333333% {
clip: rect(121px, 9999999px, 115px, 0);
}
100% {
clip: rect(101px, 9999999px, 72px, 0);
}
}
@-moz-keyframes glitch-anim {
0% {
clip: rect(110px, 9999999px, 74px, 0);
}
4.16666667% {
clip: rect(135px, 9999999px, 143px, 0);
}
8.33333333% {
clip: rect(100px, 9999999px, 100px, 0);
}
12.5% {
clip: rect(38px, 9999999px, 24px, 0);
}
16.66666667% {
clip: rect(125px, 9999999px, 83px, 0);
}
20.83333333% {
clip: rect(149px, 9999999px, 63px, 0);
}
25% {
clip: rect(12px, 9999999px, 104px, 0);
}
29.16666667% {
clip: rect(68px, 9999999px, 7px, 0);
}
33.33333333% {
clip: rect(77px, 9999999px, 20px, 0);
}
37.5% {
clip: rect(99px, 9999999px, 6px, 0);
}
41.66666667% {
clip: rect(27px, 9999999px, 99px, 0);
}
45.83333333% {
clip: rect(58px, 9999999px, 107px, 0);
}
50% {
clip: rect(108px, 9999999px, 77px, 0);
}
54.16666667% {
clip: rect(58px, 9999999px, 87px, 0);
}
58.33333333% {
clip: rect(142px, 9999999px, 112px, 0);
}
62.5% {
clip: rect(124px, 9999999px, 125px, 0);
}
66.66666667% {
clip: rect(61px, 9999999px, 53px, 0);
}
70.83333333% {
clip: rect(117px, 9999999px, 74px, 0);
}
75% {
clip: rect(21px, 9999999px, 74px, 0);
}
79.16666667% {
clip: rect(117px, 9999999px, 70px, 0);
}
83.33333333% {
clip: rect(87px, 9999999px, 122px, 0);
}
87.5% {
clip: rect(95px, 9999999px, 9px, 0);
}
91.66666667% {
clip: rect(121px, 9999999px, 75px, 0);
}
95.83333333% {
clip: rect(121px, 9999999px, 115px, 0);
}
100% {
clip: rect(101px, 9999999px, 72px, 0);
}
}
@keyframes glitch-anim {
0% {
clip: rect(110px, 9999999px, 74px, 0);
}
4.16666667% {
clip: rect(135px, 9999999px, 143px, 0);
}
8.33333333% {
clip: rect(100px, 9999999px, 100px, 0);
}
12.5% {
clip: rect(38px, 9999999px, 24px, 0);
}
16.66666667% {
clip: rect(125px, 9999999px, 83px, 0);
}
20.83333333% {
clip: rect(149px, 9999999px, 63px, 0);
}
25% {
clip: rect(12px, 9999999px, 104px, 0);
}
29.16666667% {
clip: rect(68px, 9999999px, 7px, 0);
}
33.33333333% {
clip: rect(77px, 9999999px, 20px, 0);
}
37.5% {
clip: rect(99px, 9999999px, 6px, 0);
}
41.66666667% {
clip: rect(27px, 9999999px, 99px, 0);
}
45.83333333% {
clip: rect(58px, 9999999px, 107px, 0);
}
50% {
clip: rect(108px, 9999999px, 77px, 0);
}
54.16666667% {
clip: rect(58px, 9999999px, 87px, 0);
}
58.33333333% {
clip: rect(142px, 9999999px, 112px, 0);
}
62.5% {
clip: rect(124px, 9999999px, 125px, 0);
}
66.66666667% {
clip: rect(61px, 9999999px, 53px, 0);
}
70.83333333% {
clip: rect(117px, 9999999px, 74px, 0);
}
75% {
clip: rect(21px, 9999999px, 74px, 0);
}
79.16666667% {
clip: rect(117px, 9999999px, 70px, 0);
}
83.33333333% {
clip: rect(87px, 9999999px, 122px, 0);
}
87.5% {
clip: rect(95px, 9999999px, 9px, 0);
}
91.66666667% {
clip: rect(121px, 9999999px, 75px, 0);
}
95.83333333% {
clip: rect(121px, 9999999px, 115px, 0);
}
100% {
clip: rect(101px, 9999999px, 72px, 0);
}
}
@-webkit-keyframes glitch-anim-2 {
6.66666667% {
clip: rect(76px, 9999999px, 132px, 0);
}
10% {
clip: rect(13px, 9999999px, 82px, 0);
}
13.33333333% {
clip: rect(97px, 9999999px, 2px, 0);
}
16.66666667% {
clip: rect(1px, 9999999px, 147px, 0);
}
20% {
clip: rect(113px, 9999999px, 124px, 0);
}
23.33333333% {
clip: rect(132px, 9999999px, 130px, 0);
}
26.66666667% {
clip: rect(120px, 9999999px, 32px, 0);
}
30% {
clip: rect(2px, 9999999px, 10px, 0);
}
33.33333333% {
clip: rect(76px, 9999999px, 46px, 0);
}
36.66666667% {
clip: rect(140px, 9999999px, 79px, 0);
}
40% {
clip: rect(37px, 9999999px, 67px, 0);
}
43.33333333% {
clip: rect(133px, 9999999px, 95px, 0);
}
46.66666667% {
clip: rect(6px, 9999999px, 16px, 0);
}
50% {
clip: rect(98px, 9999999px, 123px, 0);
}
53.33333333% {
clip: rect(42px, 9999999px, 88px, 0);
}
56.66666667% {
clip: rect(77px, 9999999px, 110px, 0);
}
60% {
clip: rect(22px, 9999999px, 145px, 0);
}
63.33333333% {
clip: rect(47px, 9999999px, 75px, 0);
}
66.66666667% {
clip: rect(109px, 9999999px, 135px, 0);
}
70% {
clip: rect(118px, 9999999px, 40px, 0);
}
73.33333333% {
clip: rect(74px, 9999999px, 141px, 0);
}
76.66666667% {
clip: rect(59px, 9999999px, 100px, 0);
}
80% {
clip: rect(14px, 9999999px, 32px, 0);
}
83.33333333% {
clip: rect(22px, 9999999px, 28px, 0);
}
86.66666667% {
clip: rect(106px, 9999999px, 74px, 0);
}
90% {
clip: rect(33px, 9999999px, 97px, 0);
}
93.33333333% {
clip: rect(94px, 9999999px, 29px, 0);
}
96.66666667% {
clip: rect(108px, 9999999px, 87px, 0);
}
100% {
clip: rect(5px, 9999999px, 14px, 0);
}
}
@-o-keyframes glitch-anim-2 {
6.66666667% {
clip: rect(76px, 9999999px, 132px, 0);
}
10% {
clip: rect(13px, 9999999px, 82px, 0);
}
13.33333333% {
clip: rect(97px, 9999999px, 2px, 0);
}
16.66666667% {
clip: rect(1px, 9999999px, 147px, 0);
}
20% {
clip: rect(113px, 9999999px, 124px, 0);
}
23.33333333% {
clip: rect(132px, 9999999px, 130px, 0);
}
26.66666667% {
clip: rect(120px, 9999999px, 32px, 0);
}
30% {
clip: rect(2px, 9999999px, 10px, 0);
}
33.33333333% {
clip: rect(76px, 9999999px, 46px, 0);
}
36.66666667% {
clip: rect(140px, 9999999px, 79px, 0);
}
40% {
clip: rect(37px, 9999999px, 67px, 0);
}
43.33333333% {
clip: rect(133px, 9999999px, 95px, 0);
}
46.66666667% {
clip: rect(6px, 9999999px, 16px, 0);
}
50% {
clip: rect(98px, 9999999px, 123px, 0);
}
53.33333333% {
clip: rect(42px, 9999999px, 88px, 0);
}
56.66666667% {
clip: rect(77px, 9999999px, 110px, 0);
}
60% {
clip: rect(22px, 9999999px, 145px, 0);
}
63.33333333% {
clip: rect(47px, 9999999px, 75px, 0);
}
66.66666667% {
clip: rect(109px, 9999999px, 135px, 0);
}
70% {
clip: rect(118px, 9999999px, 40px, 0);
}
73.33333333% {
clip: rect(74px, 9999999px, 141px, 0);
}
76.66666667% {
clip: rect(59px, 9999999px, 100px, 0);
}
80% {
clip: rect(14px, 9999999px, 32px, 0);
}
83.33333333% {
clip: rect(22px, 9999999px, 28px, 0);
}
86.66666667% {
clip: rect(106px, 9999999px, 74px, 0);
}
90% {
clip: rect(33px, 9999999px, 97px, 0);
}
93.33333333% {
clip: rect(94px, 9999999px, 29px, 0);
}
96.66666667% {
clip: rect(108px, 9999999px, 87px, 0);
}
100% {
clip: rect(5px, 9999999px, 14px, 0);
}
}
@-moz-keyframes glitch-anim-2 {
6.66666667% {
clip: rect(76px, 9999999px, 132px, 0);
}
10% {
clip: rect(13px, 9999999px, 82px, 0);
}
13.33333333% {
clip: rect(97px, 9999999px, 2px, 0);
}
16.66666667% {
clip: rect(1px, 9999999px, 147px, 0);
}
20% {
clip: rect(113px, 9999999px, 124px, 0);
}
23.33333333% {
clip: rect(132px, 9999999px, 130px, 0);
}
26.66666667% {
clip: rect(120px, 9999999px, 32px, 0);
}
30% {
clip: rect(2px, 9999999px, 10px, 0);
}
33.33333333% {
clip: rect(76px, 9999999px, 46px, 0);
}
36.66666667% {
clip: rect(140px, 9999999px, 79px, 0);
}
40% {
clip: rect(37px, 9999999px, 67px, 0);
}
43.33333333% {
clip: rect(133px, 9999999px, 95px, 0);
}
46.66666667% {
clip: rect(6px, 9999999px, 16px, 0);
}
50% {
clip: rect(98px, 9999999px, 123px, 0);
}
53.33333333% {
clip: rect(42px, 9999999px, 88px, 0);
}
56.66666667% {
clip: rect(77px, 9999999px, 110px, 0);
}
60% {
clip: rect(22px, 9999999px, 145px, 0);
}
63.33333333% {
clip: rect(47px, 9999999px, 75px, 0);
}
66.66666667% {
clip: rect(109px, 9999999px, 135px, 0);
}
70% {
clip: rect(118px, 9999999px, 40px, 0);
}
73.33333333% {
clip: rect(74px, 9999999px, 141px, 0);
}
76.66666667% {
clip: rect(59px, 9999999px, 100px, 0);
}
80% {
clip: rect(14px, 9999999px, 32px, 0);
}
83.33333333% {
clip: rect(22px, 9999999px, 28px, 0);
}
86.66666667% {
clip: rect(106px, 9999999px, 74px, 0);
}
90% {
clip: rect(33px, 9999999px, 97px, 0);
}
93.33333333% {
clip: rect(94px, 9999999px, 29px, 0);
}
96.66666667% {
clip: rect(108px, 9999999px, 87px, 0);
}
100% {
clip: rect(5px, 9999999px, 14px, 0);
}
}
@keyframes glitch-anim-2 {
6.66666667% {
clip: rect(76px, 9999999px, 132px, 0);
}
10% {
clip: rect(13px, 9999999px, 82px, 0);
}
13.33333333% {
clip: rect(97px, 9999999px, 2px, 0);
}
16.66666667% {
clip: rect(1px, 9999999px, 147px, 0);
}
20% {
clip: rect(113px, 9999999px, 124px, 0);
}
23.33333333% {
clip: rect(132px, 9999999px, 130px, 0);
}
26.66666667% {
clip: rect(120px, 9999999px, 32px, 0);
}
30% {
clip: rect(2px, 9999999px, 10px, 0);
}
33.33333333% {
clip: rect(76px, 9999999px, 46px, 0);
}
36.66666667% {
clip: rect(140px, 9999999px, 79px, 0);
}
40% {
clip: rect(37px, 9999999px, 67px, 0);
}
43.33333333% {
clip: rect(133px, 9999999px, 95px, 0);
}
46.66666667% {
clip: rect(6px, 9999999px, 16px, 0);
}
50% {
clip: rect(98px, 9999999px, 123px, 0);
}
53.33333333% {
clip: rect(42px, 9999999px, 88px, 0);
}
56.66666667% {
clip: rect(77px, 9999999px, 110px, 0);
}
60% {
clip: rect(22px, 9999999px, 145px, 0);
}
63.33333333% {
clip: rect(47px, 9999999px, 75px, 0);
}
66.66666667% {
clip: rect(109px, 9999999px, 135px, 0);
}
70% {
clip: rect(118px, 9999999px, 40px, 0);
}
73.33333333% {
clip: rect(74px, 9999999px, 141px, 0);
}
76.66666667% {
clip: rect(59px, 9999999px, 100px, 0);
}
80% {
clip: rect(14px, 9999999px, 32px, 0);
}
83.33333333% {
clip: rect(22px, 9999999px, 28px, 0);
}
86.66666667% {
clip: rect(106px, 9999999px, 74px, 0);
}
90% {
clip: rect(33px, 9999999px, 97px, 0);
}
93.33333333% {
clip: rect(94px, 9999999px, 29px, 0);
}
96.66666667% {
clip: rect(108px, 9999999px, 87px, 0);
}
100% {
clip: rect(5px, 9999999px, 14px, 0);
}
}
</style>
</head>
<body>
<div class="glitch-wrapper">
<div class="glitch" data-text="GLITCH">GLITCH</div>
</div>
</body>
</html>
5. Glitch Text
Made by Zoite. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Medula+One" rel="stylesheet">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: "Medula One", sans-serif;
font-size: 3em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
span:first-child {
margin-right: 20px;
}
span:last-child {
color: black;
background-color: black;
animation: fadeWhite 4s forwards;
animation-delay: 2s;
position: relative;
}
span:last-child:after {
content: "deepend";
position: absolute;
left: 2px;
top: 2px;
clip: rect(0, 900px, 0, 0);
background-color: black;
color: white;
animation: glitch 3s infinite alternate-reverse;
animation-delay: 4s;
}
span:last-child:before {
content: "deepend";
position: absolute;
left: -2px;
top: -2px;
clip: rect(0, 900px, 0, 0);
background-color: black;
color: white;
animation: glitch 3s infinite alternate-reverse;
animation-delay: 4s;
}
@keyframes fadeWhite {
100% {
color: white;
}
}
@keyframes glitch {
0% {
clip: rect(32px, 9999px, 35px, 0);
}
5% {
clip: rect(62px, 9999px, 65px, 0);
}
10% {
clip: rect(82px, 9999px, 87px, 0);
}
15% {
clip: rect(37px, 9999px, 13px, 0);
}
20% {
clip: rect(91px, 9999px, 69px, 0);
}
25% {
clip: rect(2px, 9999px, 96px, 0);
}
30% {
clip: rect(64px, 9999px, 83px, 0);
}
35% {
clip: rect(49px, 9999px, 68px, 0);
}
40% {
clip: rect(90px, 9999px, 29px, 0);
}
45% {
clip: rect(74px, 9999px, 22px, 0);
}
50% {
clip: rect(50px, 9999px, 43px, 0);
}
55% {
clip: rect(67px, 9999px, 76px, 0);
}
60% {
clip: rect(6px, 9999px, 35px, 0);
}
65% {
clip: rect(77px, 9999px, 45px, 0);
}
70% {
clip: rect(56px, 9999px, 57px, 0);
}
75% {
clip: rect(58px, 9999px, 95px, 0);
}
80% {
clip: rect(13px, 9999px, 85px, 0);
}
85% {
clip: rect(61px, 9999px, 44px, 0);
}
90% {
clip: rect(12px, 9999px, 96px, 0);
}
95% {
clip: rect(23px, 9999px, 60px, 0);
}
100% {
clip: rect(18px, 9999px, 59px, 0);
}
}
</style>
</head>
<body>
<span>the</span><span>deepend</span>
</body>
</html>
6. CSS Glitched Text
Made by Zagora. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.glitch {
color: black;
font-size: 100px;
position: relative;
width: 400px;
margin: 0 auto;
}
@keyframes noise-anim {
0% {
clip: rect(30px, 9999px, 53px, 0);
}
5% {
clip: rect(60px, 9999px, 2px, 0);
}
10% {
clip: rect(20px, 9999px, 95px, 0);
}
15% {
clip: rect(50px, 9999px, 26px, 0);
}
20% {
clip: rect(30px, 9999px, 42px, 0);
}
25% {
clip: rect(2px, 9999px, 72px, 0);
}
30% {
clip: rect(33px, 9999px, 9px, 0);
}
35% {
clip: rect(91px, 9999px, 28px, 0);
}
40% {
clip: rect(84px, 9999px, 55px, 0);
}
45% {
clip: rect(60px, 9999px, 79px, 0);
}
50% {
clip: rect(46px, 9999px, 4px, 0);
}
55% {
clip: rect(3px, 9999px, 16px, 0);
}
60% {
clip: rect(8px, 9999px, 23px, 0);
}
65% {
clip: rect(20px, 9999px, 93px, 0);
}
70% {
clip: rect(89px, 9999px, 47px, 0);
}
75% {
clip: rect(13px, 9999px, 89px, 0);
}
80% {
clip: rect(76px, 9999px, 15px, 0);
}
85% {
clip: rect(91px, 9999px, 79px, 0);
}
90% {
clip: rect(53px, 9999px, 49px, 0);
}
95% {
clip: rect(96px, 9999px, 36px, 0);
}
100% {
clip: rect(31px, 9999px, 46px, 0);
}
}
.glitch:after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim 2s infinite linear alternate-reverse;
}
@keyframes noise-anim-2 {
0% {
clip: rect(88px, 9999px, 40px, 0);
}
5% {
clip: rect(35px, 9999px, 19px, 0);
}
10% {
clip: rect(24px, 9999px, 79px, 0);
}
15% {
clip: rect(18px, 9999px, 49px, 0);
}
20% {
clip: rect(81px, 9999px, 7px, 0);
}
25% {
clip: rect(38px, 9999px, 19px, 0);
}
30% {
clip: rect(94px, 9999px, 17px, 0);
}
35% {
clip: rect(34px, 9999px, 100px, 0);
}
40% {
clip: rect(80px, 9999px, 11px, 0);
}
45% {
clip: rect(100px, 9999px, 18px, 0);
}
50% {
clip: rect(70px, 9999px, 39px, 0);
}
55% {
clip: rect(55px, 9999px, 34px, 0);
}
60% {
clip: rect(48px, 9999px, 22px, 0);
}
65% {
clip: rect(66px, 9999px, 2px, 0);
}
70% {
clip: rect(77px, 9999px, 82px, 0);
}
75% {
clip: rect(60px, 9999px, 56px, 0);
}
80% {
clip: rect(55px, 9999px, 53px, 0);
}
85% {
clip: rect(45px, 9999px, 39px, 0);
}
90% {
clip: rect(95px, 9999px, 10px, 0);
}
95% {
clip: rect(26px, 9999px, 3px, 0);
}
100% {
clip: rect(97px, 9999px, 28px, 0);
}
}
.glitch:before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim-2 3s infinite linear alternate-reverse;
}
</style>
</head>
<body>
<div class="glitch" data-text="GLITCH">GLITCH</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
7. Hover Glitch effect
Made by Sibi. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
html, body {
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
body {
background: #2B0059;
}
.glitch {
font-size: 130px;
font-family: sans-serif;
font-weight: 700;
transform: translate(0);
position: relative;
margin: 0;
text-decoration: none;
color: #fff;
cursor: pointer;
}
.glitch:before, .glitch:after {
display: block;
content: attr(data-glitch);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: opacity 0.25s ease;
}
.glitch:after {
color: #f0f;
z-index: -2;
}
.glitch:before {
color: #0ff;
z-index: -1;
}
.glitch:hover:before {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
opacity: 1;
}
.glitch:hover:after {
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
opacity: 1;
}
.glitch-btn {
position: relative;
border: 3px solid #fff;
background: transparent;
color: #fff;
padding: 10px 20px;
margin: 20px;
font-size: 30px;
z-index: 0;
}
.glitch-btn span {
position: relative;
display: inline-block;
transform: translate(0, 0);
transition: transform 0.1s ease;
}
.glitch-btn:before, .glitch-btn:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
}
.glitch-btn:after {
border: 3px solid #f0f;
z-index: -2;
}
.glitch-btn:before {
border: 3px solid #0ff;
z-index: -1;
}
.glitch-btn:hover {
border: 3px solid transparent;
cursor: pointer;
}
.glitch-btn:hover:before {
-webkit-animation: glitch-btn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
animation: glitch-btn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
opacity: 1;
}
.glitch-btn:hover:after {
animation: glitch-btn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
opacity: 1;
}
.glitch-btn:hover span {
position: relative;
transform: translate(2px, 2px);
}
@-webkit-keyframes glitch {
0% {
transform: translate(0);
}
20% {
transform: translate(-5px, 5px);
}
40% {
transform: translate(-5px, -5px);
}
60% {
transform: translate(5px, 5px);
}
80% {
transform: translate(5px, -5px);
}
to {
transform: translate(0);
}
}
@keyframes glitch {
0% {
transform: translate(0);
}
20% {
transform: translate(-5px, 5px);
}
40% {
transform: translate(-5px, -5px);
}
60% {
transform: translate(5px, 5px);
}
80% {
transform: translate(5px, -5px);
}
to {
transform: translate(0);
}
}
@-webkit-keyframes glitch-btn {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
to {
transform: translate(0);
}
}
@keyframes glitch-btn {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
to {
transform: translate(0);
}
}
</style>
</head>
<body>
<div class="container">
<!-- Glitchy Text-->
<div class="glitch" data-glitch="#13ALLACK">#13ALLACK</div>
<!-- Glitchy Button-->
<button class="glitch-btn"><span data-glitch="GLitcHY">GLitcHY</span></button>
</div>
</body>
</html>
8. Glitchy Text Button
Made by Dan. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inconsolata'>
<style>
html, body {
height: 100%;
width: 100%;
}
html {
display: table;
}
body {
font-family: "Inconsolata";
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #666;
}
a {
text-decoration: none;
color: white;
}
.glitch-btn {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
display: inline-block;
position: relative;
font-size: 36px;
letter-spacing: 0.1em;
line-height: 1.4;
text-transform: uppercase;
z-index: 1;
-webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.glitch-btn:hover:before {
background: white;
-webkit-transform: translateY(-50%) scaleY(1.5);
transform: translateY(-50%) scaleY(1.5);
}
.glitch-btn:before {
content: "";
position: absolute;
top: 50%;
left: -18px;
background: rgba(255, 255, 255, 0.1);
width: 100%;
height: 80%;
padding: 0 15px;
z-index: -1;
-webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.glitch-btn:after {
content: "";
position: absolute;
top: 50%;
left: -18px;
background: transparent;
width: 100%;
height: 100%;
padding: 0 15px;
}
.glitch-btn .mask {
position: absolute;
-webkit-backface-visibility: hidden;
height: 20%;
width: 100%;
overflow: hidden;
display: none;
}
.glitch-btn .mask span {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
}
.glitch-btn .mask:nth-child(6) {
top: 100%;
}
.glitch-btn .mask:nth-child(6) span {
top: -500%;
}
.glitch-btn .mask:nth-child(5) {
top: 80%;
}
.glitch-btn .mask:nth-child(5) span {
top: -400%;
}
.glitch-btn .mask:nth-child(4) {
top: 60%;
}
.glitch-btn .mask:nth-child(4) span {
top: -300%;
}
.glitch-btn .mask:nth-child(3) {
top: 40%;
}
.glitch-btn .mask:nth-child(3) span {
top: -200%;
}
.glitch-btn .mask:nth-child(2) {
top: 20%;
}
.glitch-btn .mask:nth-child(2) span {
top: -100%;
}
.glitch-btn:hover .label {
-webkit-animation: fade-in 0.8s both;
animation: fade-in 0.8s both;
}
.glitch-btn:hover .mask {
display: block;
}
.glitch-btn:hover .mask:nth-child(6) {
-webkit-animation: jitter-20-25-8 0.3s both;
animation: jitter-20-25-8 0.3s both;
}
.glitch-btn:hover .mask:nth-child(5) {
-webkit-animation: jitter-20-24-8 0.3s both;
animation: jitter-20-24-8 0.3s both;
}
.glitch-btn:hover .mask:nth-child(4) {
-webkit-animation: jitter-20-23-8 0.3s both;
animation: jitter-20-23-8 0.3s both;
}
.glitch-btn:hover .mask:nth-child(3) {
-webkit-animation: jitter-20-22-8 0.3s both;
animation: jitter-20-22-8 0.3s both;
}
.glitch-btn:hover .mask:nth-child(2) {
-webkit-animation: jitter-20-21-8 0.3s both;
animation: jitter-20-21-8 0.3s both;
}
@keyframes jitter-20-20-8 {
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
95% {
-webkit-transform: translate(0.3px, 0.2px);
transform: translate(0.3px, 0.2px);
}
90% {
-webkit-transform: translate(-0.7px, 0.2px);
transform: translate(-0.7px, 0.2px);
}
85% {
-webkit-transform: translate(-0.75px, 0.3px);
transform: translate(-0.75px, 0.3px);
}
80% {
-webkit-transform: translate(-0.2px, -0.2px);
transform: translate(-0.2px, -0.2px);
}
75% {
-webkit-transform: translate(-2.25px, -0.75px);
transform: translate(-2.25px, -0.75px);
}
70% {
-webkit-transform: translate(-2.1px, 0.6px);
transform: translate(-2.1px, 0.6px);
}
65% {
-webkit-transform: translate(2.8px, -0.35px);
transform: translate(2.8px, -0.35px);
}
60% {
-webkit-transform: translate(2.4px, -0.4px);
transform: translate(2.4px, -0.4px);
}
55% {
-webkit-transform: translate(-3.6px, 1.8px);
transform: translate(-3.6px, 1.8px);
}
50% {
-webkit-transform: translate(1.5px, 1.5px);
transform: translate(1.5px, 1.5px);
}
45% {
-webkit-transform: translate(3.85px, 1.65px);
transform: translate(3.85px, 1.65px);
}
40% {
-webkit-transform: translate(4.2px, 0px);
transform: translate(4.2px, 0px);
}
35% {
-webkit-transform: translate(-5.85px, -1.95px);
transform: translate(-5.85px, -1.95px);
}
30% {
-webkit-transform: translate(-5.6px, 2.8px);
transform: translate(-5.6px, 2.8px);
}
25% {
-webkit-transform: translate(5.25px, 0px);
transform: translate(5.25px, 0px);
}
20% {
-webkit-transform: translate(0.8px, 0.8px);
transform: translate(0.8px, 0.8px);
}
15% {
-webkit-transform: translate(-5.1px, 2.55px);
transform: translate(-5.1px, 2.55px);
}
10% {
-webkit-transform: translate(0.9px, 1.8px);
transform: translate(0.9px, 1.8px);
}
5% {
-webkit-transform: translate(-5.7px, 0.95px);
transform: translate(-5.7px, 0.95px);
}
}
@keyframes jitter-20-21-8 {
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
95% {
-webkit-transform: translate(-0.475px, -0.05px);
transform: translate(-0.475px, -0.05px);
}
90% {
-webkit-transform: translate(0.75px, 0.3px);
transform: translate(0.75px, 0.3px);
}
85% {
-webkit-transform: translate(-1.425px, -0.45px);
transform: translate(-1.425px, -0.45px);
}
80% {
-webkit-transform: translate(-1.5px, 0.4px);
transform: translate(-1.5px, 0.4px);
}
75% {
-webkit-transform: translate(0.875px, 1px);
transform: translate(0.875px, 1px);
}
70% {
-webkit-transform: translate(-0.75px, 0.9px);
transform: translate(-0.75px, 0.9px);
}
65% {
-webkit-transform: translate(-1.225px, 0.35px);
transform: translate(-1.225px, 0.35px);
}
60% {
-webkit-transform: translate(2.2px, -1.2px);
transform: translate(2.2px, -1.2px);
}
55% {
-webkit-transform: translate(2.925px, 0.9px);
transform: translate(2.925px, 0.9px);
}
50% {
-webkit-transform: translate(-2.75px, 0px);
transform: translate(-2.75px, 0px);
}
45% {
-webkit-transform: translate(-4.675px, -0.55px);
transform: translate(-4.675px, -0.55px);
}
40% {
-webkit-transform: translate(4.5px, -1.2px);
transform: translate(4.5px, -1.2px);
}
35% {
-webkit-transform: translate(4.875px, 0px);
transform: translate(4.875px, 0px);
}
30% {
-webkit-transform: translate(-1.75px, -0.7px);
transform: translate(-1.75px, -0.7px);
}
25% {
-webkit-transform: translate(-0.375px, 0.75px);
transform: translate(-0.375px, 0.75px);
}
20% {
-webkit-transform: translate(0.4px, 0px);
transform: translate(0.4px, 0px);
}
15% {
-webkit-transform: translate(-3.825px, 2.55px);
transform: translate(-3.825px, 2.55px);
}
10% {
-webkit-transform: translate(-2.25px, -2.7px);
transform: translate(-2.25px, -2.7px);
}
5% {
-webkit-transform: translate(6.175px, 3.8px);
transform: translate(6.175px, 3.8px);
}
}
@keyframes jitter-20-22-8 {
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
95% {
-webkit-transform: translate(-0.15px, -0.05px);
transform: translate(-0.15px, -0.05px);
}
90% {
-webkit-transform: translate(1px, 0.2px);
transform: translate(1px, 0.2px);
}
85% {
-webkit-transform: translate(1.35px, 0.45px);
transform: translate(1.35px, 0.45px);
}
80% {
-webkit-transform: translate(1.6px, -0.2px);
transform: translate(1.6px, -0.2px);
}
75% {
-webkit-transform: translate(-2.25px, -0.75px);
transform: translate(-2.25px, -0.75px);
}
70% {
-webkit-transform: translate(-1.5px, 0.3px);
transform: translate(-1.5px, 0.3px);
}
65% {
-webkit-transform: translate(3.15px, -0.35px);
transform: translate(3.15px, -0.35px);
}
60% {
-webkit-transform: translate(-0.4px, -0.8px);
transform: translate(-0.4px, -0.8px);
}
55% {
-webkit-transform: translate(-2.7px, -0.45px);
transform: translate(-2.7px, -0.45px);
}
50% {
-webkit-transform: translate(-2.5px, 2px);
transform: translate(-2.5px, 2px);
}
45% {
-webkit-transform: translate(4.4px, 0px);
transform: translate(4.4px, 0px);
}
40% {
-webkit-transform: translate(4.8px, -1.2px);
transform: translate(4.8px, -1.2px);
}
35% {
-webkit-transform: translate(-4.55px, -1.95px);
transform: translate(-4.55px, -1.95px);
}
30% {
-webkit-transform: translate(7px, 2.8px);
transform: translate(7px, 2.8px);
}
25% {
-webkit-transform: translate(-7.5px, -2.25px);
transform: translate(-7.5px, -2.25px);
}
20% {
-webkit-transform: translate(-5.6px, 2.4px);
transform: translate(-5.6px, 2.4px);
}
15% {
-webkit-transform: translate(9.35px, -1.7px);
transform: translate(9.35px, -1.7px);
}
10% {
-webkit-transform: translate(-6.3px, 0px);
transform: translate(-6.3px, 0px);
}
5% {
-webkit-transform: translate(4.75px, 0.95px);
transform: translate(4.75px, 0.95px);
}
}
@keyframes jitter-20-23-8 {
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
95% {
-webkit-transform: translate(-0.525px, 0.05px);
transform: translate(-0.525px, 0.05px);
}
90% {
-webkit-transform: translate(0.45px, 0.4px);
transform: translate(0.45px, 0.4px);
}
85% {
-webkit-transform: translate(-1.275px, 0.15px);
transform: translate(-1.275px, 0.15px);
}
80% {
-webkit-transform: translate(1.3px, -0.6px);
transform: translate(1.3px, -0.6px);
}
75% {
-webkit-transform: translate(-0.875px, 0.25px);
transform: translate(-0.875px, 0.25px);
}
70% {
-webkit-transform: translate(3.45px, 0.9px);
transform: translate(3.45px, 0.9px);
}
65% {
-webkit-transform: translate(-2.625px, 1.4px);
transform: translate(-2.625px, 1.4px);
}
60% {
-webkit-transform: translate(-3.4px, 0.8px);
transform: translate(-3.4px, 0.8px);
}
55% {
-webkit-transform: translate(-2.475px, 0.45px);
transform: translate(-2.475px, 0.45px);
}
50% {
-webkit-transform: translate(-3.75px, 1px);
transform: translate(-3.75px, 1px);
}
45% {
-webkit-transform: translate(2.475px, 1.1px);
transform: translate(2.475px, 1.1px);
}
40% {
-webkit-transform: translate(-0.3px, 1.2px);
transform: translate(-0.3px, 1.2px);
}
35% {
-webkit-transform: translate(7.475px, 2.6px);
transform: translate(7.475px, 2.6px);
}
30% {
-webkit-transform: translate(3.85px, 0.7px);
transform: translate(3.85px, 0.7px);
}
25% {
-webkit-transform: translate(-0.375px, -0.75px);
transform: translate(-0.375px, -0.75px);
}
20% {
-webkit-transform: translate(9.2px, 1.6px);
transform: translate(9.2px, 1.6px);
}
15% {
-webkit-transform: translate(4.675px, -1.7px);
transform: translate(4.675px, -1.7px);
}
10% {
-webkit-transform: translate(3.15px, -2.7px);
transform: translate(3.15px, -2.7px);
}
5% {
-webkit-transform: translate(5.225px, 3.8px);
transform: translate(5.225px, 3.8px);
}
}
@keyframes jitter-20-24-8 {
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
95% {
-webkit-transform: translate(0.35px, 0.1px);
transform: translate(0.35px, 0.1px);
}
90% {
-webkit-transform: translate(1px, -0.3px);
transform: translate(1px, -0.3px);
}
85% {
-webkit-transform: translate(1.2px, 0.45px);
transform: translate(1.2px, 0.45px);
}
80% {
-webkit-transform: translate(2.4px, 0px);
transform: translate(2.4px, 0px);
}
75% {
-webkit-transform: translate(1.25px, 0.5px);
transform: translate(1.25px, 0.5px);
}
70% {
-webkit-transform: translate(-2.1px, 0px);
transform: translate(-2.1px, 0px);
}
65% {
-webkit-transform: translate(2.8px, -1.05px);
transform: translate(2.8px, -1.05px);
}
60% {
-webkit-transform: translate(2.8px, 0.4px);
transform: translate(2.8px, 0.4px);
}
55% {
-webkit-transform: translate(0.9px, -0.45px);
transform: translate(0.9px, -0.45px);
}
50% {
-webkit-transform: translate(-1.5px, -0.5px);
transform: translate(-1.5px, -0.5px);
}
45% {
-webkit-transform: translate(4.4px, -1.65px);
transform: translate(4.4px, -1.65px);
}
40% {
-webkit-transform: translate(4.8px, 0.6px);
transform: translate(4.8px, 0.6px);
}
35% {
-webkit-transform: translate(5.2px, 1.95px);
transform: translate(5.2px, 1.95px);
}
30% {
-webkit-transform: translate(1.4px, -1.4px);
transform: translate(1.4px, -1.4px);
}
25% {
-webkit-transform: translate(-6px, -2.25px);
transform: translate(-6px, -2.25px);
}
20% {
-webkit-transform: translate(-8.8px, 0.8px);
transform: translate(-8.8px, 0.8px);
}
15% {
-webkit-transform: translate(0.85px, -1.7px);
transform: translate(0.85px, -1.7px);
}
10% {
-webkit-transform: translate(9px, -2.7px);
transform: translate(9px, -2.7px);
}
5% {
-webkit-transform: translate(9.5px, 2.85px);
transform: translate(9.5px, 2.85px);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="glitch-btn">
<div class="label">I'm Glitchy</div>
<div class="mask"><span>I'm Glitchy</span></div>
<div class="mask"><span>I'm Glitchy</span></div>
<div class="mask"><span>I'm Glitchy</span></div>
<div class="mask"><span>I'm Glitchy</span></div>
<div class="mask"><span>I'm Glitchy</span></div>
</div>
</body>
</html>
9. CSS Hover Glitch Effect
Made by Alexey Kiselev. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #000;
}
.text {
padding: 10px;
color: #fefefe;
}
.text--glitch {
font-family: sans-serif;
font-size: 90px;
text-transform: uppercase;
font-weight: bold;
}
.text--hover {
font-family: serif;
font-size: 60px;
}
.text--glitch,
.text--hover:hover{
animation: animate .5s linear infinite;
}
@keyframes animate {
0%, 100% {
text-shadow: -1.5px -1.5px 0 #0ff, 2px 2px 0 #f00;
}
25% {
text-shadow: 2px 2px 0 #0ff, -1.5px -1.5px 0 #f00;
}
50% {
text-shadow: 1.5px -2px 0 #0ff, -2px 1.5px 0 #f00;
}
75% {
text-shadow: -2px 1.5px 0 #0ff, 1.5px -2px 0 #f00;
}
}
</style>
</head>
<body>
<p class='text text--glitch'>Glitch</p>
<p class='text text--hover'>Hover me</p>
</body>
</html>
10. CSS Text Glitch effect
Made by Alexander Erlandsson. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
.glitch-text {
font-size: 5em;
color: white;
position: relative;
}
@-webkit-keyframes textGlitch-anim-1 {
0% {
clip: rect(1px, 450px, 26px, 0);
}
5.8823529412% {
clip: rect(43px, 450px, 7px, 0);
}
11.7647058824% {
clip: rect(56px, 450px, 65px, 0);
}
17.6470588235% {
clip: rect(39px, 450px, 82px, 0);
}
23.5294117647% {
clip: rect(51px, 450px, 71px, 0);
}
29.4117647059% {
clip: rect(104px, 450px, 29px, 0);
}
35.2941176471% {
clip: rect(60px, 450px, 32px, 0);
}
41.1764705882% {
clip: rect(9px, 450px, 96px, 0);
}
47.0588235294% {
clip: rect(71px, 450px, 67px, 0);
}
52.9411764706% {
clip: rect(48px, 450px, 96px, 0);
}
58.8235294118% {
clip: rect(99px, 450px, 114px, 0);
}
64.7058823529% {
clip: rect(95px, 450px, 63px, 0);
}
70.5882352941% {
clip: rect(48px, 450px, 59px, 0);
}
76.4705882353% {
clip: rect(10px, 450px, 7px, 0);
}
82.3529411765% {
clip: rect(80px, 450px, 103px, 0);
}
88.2352941176% {
clip: rect(82px, 450px, 12px, 0);
}
94.1176470588% {
clip: rect(83px, 450px, 12px, 0);
}
100% {
clip: rect(103px, 450px, 50px, 0);
}
}
@keyframes textGlitch-anim-1 {
0% {
clip: rect(1px, 450px, 26px, 0);
}
5.8823529412% {
clip: rect(43px, 450px, 7px, 0);
}
11.7647058824% {
clip: rect(56px, 450px, 65px, 0);
}
17.6470588235% {
clip: rect(39px, 450px, 82px, 0);
}
23.5294117647% {
clip: rect(51px, 450px, 71px, 0);
}
29.4117647059% {
clip: rect(104px, 450px, 29px, 0);
}
35.2941176471% {
clip: rect(60px, 450px, 32px, 0);
}
41.1764705882% {
clip: rect(9px, 450px, 96px, 0);
}
47.0588235294% {
clip: rect(71px, 450px, 67px, 0);
}
52.9411764706% {
clip: rect(48px, 450px, 96px, 0);
}
58.8235294118% {
clip: rect(99px, 450px, 114px, 0);
}
64.7058823529% {
clip: rect(95px, 450px, 63px, 0);
}
70.5882352941% {
clip: rect(48px, 450px, 59px, 0);
}
76.4705882353% {
clip: rect(10px, 450px, 7px, 0);
}
82.3529411765% {
clip: rect(80px, 450px, 103px, 0);
}
88.2352941176% {
clip: rect(82px, 450px, 12px, 0);
}
94.1176470588% {
clip: rect(83px, 450px, 12px, 0);
}
100% {
clip: rect(103px, 450px, 50px, 0);
}
}
@-webkit-keyframes textGlitch-anim-2 {
0% {
clip: rect(92px, 450px, 67px, 0);
}
5.8823529412% {
clip: rect(86px, 450px, 98px, 0);
}
11.7647058824% {
clip: rect(110px, 450px, 83px, 0);
}
17.6470588235% {
clip: rect(22px, 450px, 24px, 0);
}
23.5294117647% {
clip: rect(20px, 450px, 14px, 0);
}
29.4117647059% {
clip: rect(101px, 450px, 33px, 0);
}
35.2941176471% {
clip: rect(22px, 450px, 92px, 0);
}
41.1764705882% {
clip: rect(76px, 450px, 3px, 0);
}
47.0588235294% {
clip: rect(64px, 450px, 108px, 0);
}
52.9411764706% {
clip: rect(28px, 450px, 103px, 0);
}
58.8235294118% {
clip: rect(44px, 450px, 6px, 0);
}
64.7058823529% {
clip: rect(15px, 450px, 6px, 0);
}
70.5882352941% {
clip: rect(81px, 450px, 64px, 0);
}
76.4705882353% {
clip: rect(33px, 450px, 45px, 0);
}
82.3529411765% {
clip: rect(107px, 450px, 95px, 0);
}
88.2352941176% {
clip: rect(52px, 450px, 41px, 0);
}
94.1176470588% {
clip: rect(4px, 450px, 94px, 0);
}
100% {
clip: rect(28px, 450px, 32px, 0);
}
}
@keyframes textGlitch-anim-2 {
0% {
clip: rect(92px, 450px, 67px, 0);
}
5.8823529412% {
clip: rect(86px, 450px, 98px, 0);
}
11.7647058824% {
clip: rect(110px, 450px, 83px, 0);
}
17.6470588235% {
clip: rect(22px, 450px, 24px, 0);
}
23.5294117647% {
clip: rect(20px, 450px, 14px, 0);
}
29.4117647059% {
clip: rect(101px, 450px, 33px, 0);
}
35.2941176471% {
clip: rect(22px, 450px, 92px, 0);
}
41.1764705882% {
clip: rect(76px, 450px, 3px, 0);
}
47.0588235294% {
clip: rect(64px, 450px, 108px, 0);
}
52.9411764706% {
clip: rect(28px, 450px, 103px, 0);
}
58.8235294118% {
clip: rect(44px, 450px, 6px, 0);
}
64.7058823529% {
clip: rect(15px, 450px, 6px, 0);
}
70.5882352941% {
clip: rect(81px, 450px, 64px, 0);
}
76.4705882353% {
clip: rect(33px, 450px, 45px, 0);
}
82.3529411765% {
clip: rect(107px, 450px, 95px, 0);
}
88.2352941176% {
clip: rect(52px, 450px, 41px, 0);
}
94.1176470588% {
clip: rect(4px, 450px, 94px, 0);
}
100% {
clip: rect(28px, 450px, 32px, 0);
}
}
.glitch-text:before, .glitch-text:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
background: black;
clip: rect(0, 0, 0, 0);
}
.glitch-text:after {
left: 2px;
text-shadow: -1px 0 red;
animation: textGlitch-anim-1 2s infinite linear alternate-reverse;
}
.glitch-text:before {
left: -2px;
text-shadow: 2px 0 blue;
animation: textGlitch-anim-2 3s infinite linear alternate-reverse;
}
body {
margin: 0;
font-family: sans-serif;
background-color: black;
}
</style>
</head>
<body>
<div class="glitch-text" data-text="Alex Erlandsson">Alex Erlandsson</div>
</body>
</html>
11. Simple Glitch effect
Made by Sergey Shapovalov. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
background-color: #333;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.glitch {
font-size: 87px;
font-family: Arial, sans-serif;
color: #fff;
text-transform: uppercase;
position: relative;
}
.glitch:before, .glitch:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch:before {
left: 2px;
text-shadow: -3px 0 red;
background-color: #333333;
z-index: 20;
animation: glitch-anim2 1.4s infinite linear alternate-reverse;
}
.glitch:after {
left: -2px;
text-shadow: 3px 0 blue;
background-color: #333333;
z-index: 20;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
animation: glitch-anim1 1.4s infinite linear alternate-reverse;
}
@-webkit-keyframes glitch-anim1 {
0% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 32%, 0% 32%);
clip-path: polygon(0% 0%, 100% 0%, 100% 32%, 0% 32%);
}
10% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 79%, 0% 79%);
clip-path: polygon(0% 0%, 100% 0%, 100% 79%, 0% 79%);
}
20% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 51%, 0% 51%);
clip-path: polygon(0% 0%, 100% 0%, 100% 51%, 0% 51%);
}
30% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 2%, 0% 2%);
clip-path: polygon(0% 0%, 100% 0%, 100% 2%, 0% 2%);
}
40% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 4%, 0% 4%);
clip-path: polygon(0% 0%, 100% 0%, 100% 4%, 0% 4%);
}
50% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 64%, 0% 64%);
clip-path: polygon(0% 0%, 100% 0%, 100% 64%, 0% 64%);
}
60% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
}
70% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 0% 65%);
clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 0% 65%);
}
80% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 76%, 0% 76%);
clip-path: polygon(0% 0%, 100% 0%, 100% 76%, 0% 76%);
}
90% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 39%, 0% 39%);
clip-path: polygon(0% 0%, 100% 0%, 100% 39%, 0% 39%);
}
100% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 89%, 0% 89%);
clip-path: polygon(0% 0%, 100% 0%, 100% 89%, 0% 89%);
}
}
@keyframes glitch-anim1 {
0% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 32%, 0% 32%);
clip-path: polygon(0% 0%, 100% 0%, 100% 32%, 0% 32%);
}
10% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 79%, 0% 79%);
clip-path: polygon(0% 0%, 100% 0%, 100% 79%, 0% 79%);
}
20% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 51%, 0% 51%);
clip-path: polygon(0% 0%, 100% 0%, 100% 51%, 0% 51%);
}
30% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 2%, 0% 2%);
clip-path: polygon(0% 0%, 100% 0%, 100% 2%, 0% 2%);
}
40% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 4%, 0% 4%);
clip-path: polygon(0% 0%, 100% 0%, 100% 4%, 0% 4%);
}
50% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 64%, 0% 64%);
clip-path: polygon(0% 0%, 100% 0%, 100% 64%, 0% 64%);
}
60% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
}
70% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 0% 65%);
clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 0% 65%);
}
80% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 76%, 0% 76%);
clip-path: polygon(0% 0%, 100% 0%, 100% 76%, 0% 76%);
}
90% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 39%, 0% 39%);
clip-path: polygon(0% 0%, 100% 0%, 100% 39%, 0% 39%);
}
100% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 89%, 0% 89%);
clip-path: polygon(0% 0%, 100% 0%, 100% 89%, 0% 89%);
}
}
@-webkit-keyframes glitch-anim2 {
0% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 28%, 0% 28%);
clip-path: polygon(0% 0%, 100% 0%, 100% 28%, 0% 28%);
}
10% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 58%, 0% 58%);
clip-path: polygon(0% 0%, 100% 0%, 100% 58%, 0% 58%);
}
20% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
}
30% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 0% 20%);
clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 0% 20%);
}
40% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 70%);
clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 70%);
}
50% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 43%, 0% 43%);
clip-path: polygon(0% 0%, 100% 0%, 100% 43%, 0% 43%);
}
60% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 0% 15%);
clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 0% 15%);
}
70% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 54%, 0% 54%);
clip-path: polygon(0% 0%, 100% 0%, 100% 54%, 0% 54%);
}
80% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
}
90% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 17%, 0% 17%);
clip-path: polygon(0% 0%, 100% 0%, 100% 17%, 0% 17%);
}
100% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 0% 66%);
clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 0% 66%);
}
}
@keyframes glitch-anim2 {
0% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 28%, 0% 28%);
clip-path: polygon(0% 0%, 100% 0%, 100% 28%, 0% 28%);
}
10% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 58%, 0% 58%);
clip-path: polygon(0% 0%, 100% 0%, 100% 58%, 0% 58%);
}
20% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
clip-path: polygon(0% 0%, 100% 0%, 100% 19%, 0% 19%);
}
30% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 0% 20%);
clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 0% 20%);
}
40% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 70%);
clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 70%);
}
50% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 43%, 0% 43%);
clip-path: polygon(0% 0%, 100% 0%, 100% 43%, 0% 43%);
}
60% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 0% 15%);
clip-path: polygon(0% 0%, 100% 0%, 100% 15%, 0% 15%);
}
70% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 54%, 0% 54%);
clip-path: polygon(0% 0%, 100% 0%, 100% 54%, 0% 54%);
}
80% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
}
90% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 17%, 0% 17%);
clip-path: polygon(0% 0%, 100% 0%, 100% 17%, 0% 17%);
}
100% {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 0% 66%);
clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 0% 66%);
}
}
</style>
</head>
<body>
<div class="wrapper">
<span data-text="glitch" class="glitch">glitch</span>
</div>
</body>
</html>