@-moz-keyframes glitch {
0% {
-moz-transform: skew(-21deg);
transform: skew(-21deg);
}
5% {
-moz-transform: skew(3deg);
transform: skew(3deg);
}
10% {
-moz-transform: skew(-4deg);
transform: skew(-4deg);
}
15% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
20% {
-moz-transform: skew(83deg);
transform: skew(83deg);
}
25% {
-moz-transform: skew(90deg);
transform: skew(90deg);
}
30% {
-moz-transform: skew(-59deg);
transform: skew(-59deg);
}
35% {
-moz-transform: skew(77deg);
transform: skew(77deg);
}
40% {
-moz-transform: skew(27deg);
transform: skew(27deg);
}
45% {
-moz-transform: skew(-59deg);
transform: skew(-59deg);
}
50% {
-moz-transform: skew(85deg);
transform: skew(85deg);
}
55% {
-moz-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-68deg);
transform: skew(-68deg);
}
65% {
-moz-transform: skew(-55deg);
transform: skew(-55deg);
}
70% {
-moz-transform: skew(12deg);
transform: skew(12deg);
}
75% {
-moz-transform: skew(-19deg);
transform: skew(-19deg);
}
80% {
-moz-transform: skew(-74deg);
transform: skew(-74deg);
}
85% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
90% {
-moz-transform: skew(83deg);
transform: skew(83deg);
}
95% {
-moz-transform: skew(-34deg);
transform: skew(-34deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
5% {
-webkit-transform: skew(42deg);
transform: skew(42deg);
}
10% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
15% {
-webkit-transform: skew(-84deg);
transform: skew(-84deg);
}
20% {
-webkit-transform: skew(-28deg);
transform: skew(-28deg);
}
25% {
-webkit-transform: skew(40deg);
transform: skew(40deg);
}
30% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
35% {
-webkit-transform: skew(28deg);
transform: skew(28deg);
}
40% {
-webkit-transform: skew(-51deg);
transform: skew(-51deg);
}
45% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
50% {
-webkit-transform: skew(59deg);
transform: skew(59deg);
}
55% {
-webkit-transform: skew(-26deg);
transform: skew(-26deg);
}
60% {
-webkit-transform: skew(60deg);
transform: skew(60deg);
}
65% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
70% {
-webkit-transform: skew(-66deg);
transform: skew(-66deg);
}
75% {
-webkit-transform: skew(48deg);
transform: skew(48deg);
}
80% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
85% {
-webkit-transform: skew(-67deg);
transform: skew(-67deg);
}
90% {
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
95% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(90deg);
-ms-transform: skew(90deg);
-webkit-transform: skew(90deg);
transform: skew(90deg);
}
5% {
-moz-transform: skew(-20deg);
-ms-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
}
10% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
15% {
-moz-transform: skew(71deg);
-ms-transform: skew(71deg);
-webkit-transform: skew(71deg);
transform: skew(71deg);
}
20% {
-moz-transform: skew(-45deg);
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
25% {
-moz-transform: skew(-57deg);
-ms-transform: skew(-57deg);
-webkit-transform: skew(-57deg);
transform: skew(-57deg);
}
30% {
-moz-transform: skew(-88deg);
-ms-transform: skew(-88deg);
-webkit-transform: skew(-88deg);
transform: skew(-88deg);
}
35% {
-moz-transform: skew(-28deg);
-ms-transform: skew(-28deg);
-webkit-transform: skew(-28deg);
transform: skew(-28deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(18deg);
-ms-transform: skew(18deg);
-webkit-transform: skew(18deg);
transform: skew(18deg);
}
50% {
-moz-transform: skew(-35deg);
-ms-transform: skew(-35deg);
-webkit-transform: skew(-35deg);
transform: skew(-35deg);
}
55% {
-moz-transform: skew(41deg);
-ms-transform: skew(41deg);
-webkit-transform: skew(41deg);
transform: skew(41deg);
}
60% {
-moz-transform: skew(5deg);
-ms-transform: skew(5deg);
-webkit-transform: skew(5deg);
transform: skew(5deg);
}
65% {
-moz-transform: skew(-22deg);
-ms-transform: skew(-22deg);
-webkit-transform: skew(-22deg);
transform: skew(-22deg);
}
70% {
-moz-transform: skew(18deg);
-ms-transform: skew(18deg);
-webkit-transform: skew(18deg);
transform: skew(18deg);
}
75% {
-moz-transform: skew(-23deg);
-ms-transform: skew(-23deg);
-webkit-transform: skew(-23deg);
transform: skew(-23deg);
}
80% {
-moz-transform: skew(50deg);
-ms-transform: skew(50deg);
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
85% {
-moz-transform: skew(-17deg);
-ms-transform: skew(-17deg);
-webkit-transform: skew(-17deg);
transform: skew(-17deg);
}
90% {
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
-webkit-transform: skew(-30deg);
transform: skew(-30deg);
}
95% {
-moz-transform: skew(32deg);
-ms-transform: skew(32deg);
-webkit-transform: skew(32deg);
transform: skew(32deg);
}
}
@-moz-keyframes noise {
0% {
background-position: -54px -99px;
}
10% {
background-position: -3px 21px;
}
20% {
background-position: 74px 41px;
}
30% {
background-position: -90px -44px;
}
40% {
background-position: -64px -34px;
}
50% {
background-position: -19px -17px;
}
60% {
background-position: 97px -19px;
}
70% {
background-position: 12px -89px;
}
80% {
background-position: 40px 69px;
}
90% {
background-position: 15px -64px;
}
}
@-webkit-keyframes noise {
0% {
background-position: -2px 16px;
}
10% {
background-position: 52px 98px;
}
20% {
background-position: -62px 5px;
}
30% {
background-position: -63px -64px;
}
40% {
background-position: 59px -23px;
}
50% {
background-position: -22px 10px;
}
60% {
background-position: -75px 48px;
}
70% {
background-position: -1px 57px;
}
80% {
background-position: -65px 12px;
}
90% {
background-position: -39px -63px;
}
}
@keyframes noise {
0% {
background-position: 27px 51px;
}
10% {
background-position: 8px -77px;
}
20% {
background-position: -7px -59px;
}
30% {
background-position: -31px -63px;
}
40% {
background-position: 38px -49px;
}
50% {
background-position: 19px -26px;
}
60% {
background-position: -79px 8px;
}
70% {
background-position: 12px 37px;
}
80% {
background-position: -13px -2px;
}
90% {
background-position: 9px -30px;
}
}
@-moz-keyframes bar {
0% {
height: 530px;
top: 19%;
opacity: 0.6;
}
10% {
height: 141px;
top: 73%;
opacity: 0.24;
}
20% {
height: 590px;
top: 18%;
opacity: 0.8;
}
30% {
height: 121px;
top: 34%;
opacity: 0.06;
}
40% {
height: 119px;
top: 37%;
opacity: 0.62;
}
50% {
height: 338px;
top: 49%;
opacity: 0.42;
}
60% {
height: 406px;
top: 6%;
opacity: 0.38;
}
70% {
height: 125px;
top: 73%;
opacity: 0.69;
}
80% {
height: 166px;
top: 49%;
opacity: 0.79;
}
90% {
height: 140px;
top: 71%;
opacity: 0.52;
}
}
@-webkit-keyframes bar {
0% {
height: 283px;
top: 6%;
opacity: 0.17;
}
10% {
height: 551px;
top: 7%;
opacity: 0.19;
}
20% {
height: 292px;
top: 5%;
opacity: 0.05;
}
30% {
height: 150px;
top: 27%;
opacity: 0.31;
}
40% {
height: 391px;
top: 28%;
opacity: 0.77;
}
50% {
height: 376px;
top: 57%;
opacity: 0.2;
}
60% {
height: 174px;
top: 22%;
opacity: 0.8;
}
70% {
height: 486px;
top: 22%;
opacity: 0.25;
}
80% {
height: 477px;
top: 80%;
opacity: 0.32;
}
90% {
height: 34px;
top: 61%;
opacity: 0.51;
}
}
@keyframes bar {
0% {
height: 360px;
top: 44%;
opacity: 0.32;
}
10% {
height: 211px;
top: 83%;
opacity: 0.16;
}
20% {
height: 373px;
top: 98%;
opacity: 0.41;
}
30% {
height: 59px;
top: 19%;
opacity: 0.02;
}
40% {
height: 493px;
top: 70%;
opacity: 0.54;
}
50% {
height: 435px;
top: 45%;
opacity: 0.36;
}
60% {
height: 172px;
top: 53%;
opacity: 0.01;
}
70% {
height: 558px;
top: 85%;
opacity: 0.03;
}
80% {
height: 50px;
top: 14%;
opacity: 0.4;
}
90% {
height: 463px;
top: 1%;
opacity: 0.07;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align:
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}