CSS
/**
* --glitch
*/
body {background: black;}
h1 {
font-family: 'puristalight', Courier, monospace;
text-transform: uppercase;
letter-spacing: .2em;
font-size: 3.375em;
padding-bottom: .5em;
color: #4ec5c1;
}
h1.fb-glitch {
position: relative; }
@keyframes glitch-anim-1 {
0% {
clip: rect(8px, 820px, 81px, 0); }
5.8823529412% {
clip: rect(93px, 820px, 10px, 0); }
11.7647058824% {
clip: rect(10px, 820px, 84px, 0); }
17.6470588235% {
clip: rect(99px, 820px, 9px, 0); }
23.5294117647% {
clip: rect(96px, 820px, 104px, 0); }
29.4117647059% {
clip: rect(12px, 820px, 75px, 0); }
35.2941176471% {
clip: rect(9px, 820px, 56px, 0); }
41.1764705882% {
clip: rect(36px, 820px, 47px, 0); }
47.0588235294% {
clip: rect(98px, 820px, 23px, 0); }
52.9411764706% {
clip: rect(59px, 820px, 59px, 0); }
58.8235294118% {
clip: rect(50px, 820px, 26px, 0); }
64.7058823529% {
clip: rect(111px, 820px, 91px, 0); }
70.5882352941% {
clip: rect(103px, 820px, 49px, 0); }
76.4705882353% {
clip: rect(6px, 820px, 68px, 0); }
82.3529411765% {
clip: rect(6px, 820px, 16px, 0); }
88.2352941176% {
clip: rect(30px, 820px, 28px, 0); }
94.1176470588% {
clip: rect(78px, 820px, 73px, 0); }
100% {
clip: rect(78px, 820px, 99px, 0); } }
@keyframes glitch-anim-2 {
0% {
clip: rect(29px, 820px, 90px, 0); }
5.8823529412% {
clip: rect(19px, 820px, 11px, 0); }
11.7647058824% {
clip: rect(60px, 820px, 106px, 0); }
17.6470588235% {
clip: rect(5px, 820px, 103px, 0); }
23.5294117647% {
clip: rect(83px, 820px, 6px, 0); }
29.4117647059% {
clip: rect(99px, 820px, 69px, 0); }
35.2941176471% {
clip: rect(23px, 820px, 29px, 0); }
41.1764705882% {
clip: rect(50px, 820px, 54px, 0); }
47.0588235294% {
clip: rect(75px, 820px, 100px, 0); }
52.9411764706% {
clip: rect(77px, 820px, 89px, 0); }
58.8235294118% {
clip: rect(55px, 820px,...