Best jQuery
.text-effect{
color: #555;
font-family: 'Press Start 2P', cursive;
font-size: 80px;
font-weight: 400;
text-align: center;
position: relative;
z-index: 1;
animation: glitch1 2.5s infinite;
}
.text-effect:before,
.text-effect:after{
content:attr(data-content);
color: #67f3da;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index:-1;
animation: glitch2 2.5s infinite;
}
.text-effect:after{
color: #f16f6f;
animation: glitch3 2.5s infinite;
}
@keyframes glitch1{
0%{
transform: none;
opacity: 1;
}
7%{
transform: skew(-0.5deg, -0.9deg);
opacity: 0.75;
}
10%{
transform: none;
opacity: 1;
}
27%{
transform: none;
opacity: 1;
}
30%{
transform: skew(0.8deg, -0.1deg);
opacity: 0.75;
}
35%{
transform: none;
opacity: 1;
}
52%{
transform: none;
opacity: 1;
}
55%{
transform: skew(-1deg, 0.2deg);
opacity: 0.75;
}
50%{
transform: none;
opacity: 1;
}
72%{
transform: none;
opacity: 1;
}
75%{
transform: skew(0.4deg, 1deg);
opacity: 0.75;
}
80%{
transform: none;
opacity: 1;
}
100%{
transform: none;
opacity: 1;
}
}
@keyframes glitch2{
0%{
transform: none;
opacity: 0.25;
}
7%{
transform: translate(-2px, -3px);
opacity: 0.5;
}
10%{
transform: none;
opacity: 0.25;
}
27%{
transform: none;
opacity: 0.25;
}
30%{
transform: translate(-5px, -2px);
opacity: 0.5;
}
35%{
transform: none;
opacity: 0.25;
}
52%{
transform: none;
opacity: 0.25;
}
55%{
transform: translate(-5px, -1px);
opacity: 0.5;
}
50%{
transform: none;
opacity: 0.25;
}
72%{
transform: none;
opacity: 0.25;
}
75%{
transform: translate(-2px, -6px);
opacity: 0.5;
}
80%{
transform: none;
opacity: 0.25;
}
100%{
transform: none;
opacity: 0.25;
}
}
@keyframes glitch3{
0%{
transform: none;
opacity: 0.25;
}
7%{
transform: translate(2px, 3px);
opacity: 0.5;
}
10%{
transform: none;
opacity: 0.25;
}
27%{
transform: none;
opacity: 0.25;
}
30%{
transform: translate(5px, 2px);
opacity: 0.5;
}
35%{
transform: none;
opacity: 0.25;
}
52%{
transform: none;
opacity: 0.25;
}
55%{
transform: translate(5px, 1px);
opacity: 0.5;
}
50%{
transform: none;
opacity: 0.25;
}
72%{
transform: none;
opacity: 0.25;
}
75%{
transform: translate(2px, 6px);
opacity: 0.5;
}
80%{
transform: none;
opacity: 0.25;
}
100%{
transform: none;
opacity: 0.25;
}
}
@media only screen and (max-width: 990px){
.text-effect{ font-size: 70px; }
}
@media only screen and (max-width: 767px){
.text-effect{ font-size: 60px; }
}
@media only screen and (max-width: 576px){
.text-effect{ font-size: 35px; }
}