.grid-layer:nth-child(3) {
animation: colorShift 10s infinite, glitchDistort 4s infinite;
background-size: 60px 60px;
opacity: 0.3;
}
@keyframes colorShift {
0% {
filter: hue-rotate(0deg) brightness(1);
background-image:
linear-gradient(rgba(0, 255, 255, 0.2) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 255, 0.2) 1px, transparent 1px);
}
25% {
filter: hue-rotate(90deg) brightness(1.2);
background-image:
linear-gradient(rgba(255, 0, 255, 0.2) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 0, 255, 0.2) 1px, transparent 1px);
}
50% {
filter: hue-rotate(180deg) brightness(1);
background-image:
linear-gradient(rgba(255, 255, 0, 0.2) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 0, 0.2) 1px, transparent 1px);
}
75% {
filter: hue-rotate(270deg) brightness(1.2);
background-image:
linear-gradient(rgba(0, 255, 128, 0.2) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 128, 0.2) 1px, transparent 1px);
}
100% {
filter: hue-rotate(360deg) brightness(1);
background-image:
linear-gradient(rgba(0, 255, 255, 0.2) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 255, 0.2) 1px, transparent 1px);
}
}
@keyframes glitchMove {
0%, 100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5px, 5px);
}
20% {
transform: translate(5px, -5px);
}
30% {
transform: translate(-5px, -5px);
}
40% {
transform: translate(5px, 5px);
}
50% {
transform: translate(0, 0);
}
60% {
transform: translate(-3px, 3px) skew(2deg);
}
70% {
transform: translate(3px, -3px) skew(-2deg);
}
80% {
transform: translate(0, 0);
}
}
@keyframes glitchDistort {
0%, 90%, 100% {
transform: translate(0, 0) scale(1);
opacity: 0.3;
}
92% {
transform: translate(10px, 0) scale(1.02);
opacity: 0.6;
}
94% {
transform: translate(-10px, 0) scale(0.98);
opacity: 0.2;
}
96% {
transform: translate(5px, 5px) scale(1.01);
opacity: 0.5;
}
}