glitch.css

:root {
  --max-height-var: 70vh;
  --max-width-var: 30vw;
}

html, body{
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  box-sizing: border-box;
  /* overflow: hidden; */
}

#image-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 75%;
  width: 48%;
  position: absolute;
  bottom: 0%;
  right: 0%;
  z-index: 10;
}
.image {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}
.image h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
.image img {
  height: var(--max-height-var);
  width: var(--max-width-var);
  /* max-height: 100vh; */
  /* max-width: 100vw; */
  margin: 0 auto;
}
.image::after {
  position: absolute;
  left: 8px;
  top: 0;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  height: var(--max-height-var);
  width: var(--max-width-var);
  -webkit-filter: drop-shadow(-1px -1px 5px rgba(0, 255, 0, 0.2)) hue-rotate(142 deg);
  filter: drop-shadow(-1px -1px 5px rgba(0, 255, 0, 0.2)) hue-rotate(196deg);
}
.image::before {
  position: absolute;
  left: -8px;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  height: var(--max-height-var);
  width: var(--max-width-var);
  -webkit-filter: drop-shadow(1px 1px 5px rgba(255, 0, 0, 0.2)) hue-rotate(15deg);
  filter: drop-shadow(1px 1px 5px rgba(255, 0, 0, 0.2)) hue-rotate(302deg);
}
.imageFlickerIn {
  opacity: 0;
  animation: flicker-in 1.5s forwards;
  animation-delay: 1.5s;
}
.imageFlickerOut {
  opacity: 1;
  animation: flicker-out 1.5s forwards;
}

.stuccan-container {
  position: absolute;
  top: 0;
  opacity: 0;
}
.stuccan-container:nth-child(1){
  opacity: 1;
}
@keyframes noise-anim {
  0% {
    clip: rect(357px, 9999px, 162px, 0);
  }
  5% {
    clip: rect(468px, 9999px, 25px, 0);
  }
  10% {
    clip: rect(405px, 9999px, 373px, 0);
  }
  15% {
    clip: rect(2px, 9999px, 216px, 0);
  }
  20% {
    clip: rect(467px, 9999px, 443px, 0);
  }
  25% {
    clip: rect(368px, 9999px, 450px, 0);
  }
  30% {
    clip: rect(452px, 9999px, 113px, 0);
  }
  35% {
    clip: rect(238px, 9999px, 17px, 0);
  }
  40% {
    clip: rect(200px, 9999px, 264px, 0);
  }
  45% {
    clip: rect(302px, 9999px, 380px, 0);
  }
  50% {
    clip: rect(211px, 9999px, 202px, 0);
  }
  55% {
    clip: rect(441px, 9999px, 147px, 0);
  }
  60% {
    clip: rect(40px, 9999px, 315px, 0);
  }
  65% {
    clip: rect(321px, 9999px, 340px, 0);
  }
  70% {
    clip: rect(289px, 9999px, 52px, 0);
  }
  75% {
    clip: rect(495px, 9999px, 389px, 0);
  }
  80% {
    clip: rect(476px, 9999px, 476px, 0);
  }
  85% {
    clip: rect(29px, 9999px, 349px, 0);
  }
  90% {
    clip: rect(248px, 9999px, 374px, 0);
  }
  95% {
    clip: rect(276px, 9999px, 311px, 0);
  }
  100% {
    clip: rect(475px, 9999px, 118px, 0);
  }
}
/* @keyframes noise-anim {
  0% {
    clip-path: polygon(0 90%, 100% 90%, 100% 93%, 0 93%);
  }
  10% {
    clip-path: polygon(0 66%, 100% 66%, 100% 41%, 0 41%);
  }
  20% {
    clip-path: polygon(0 14%, 100% 14%, 100% 97%, 0 97%);
  }
  30% {
    clip-path: polygon(0 33%, 100% 33%, 100% 64%, 0 64%);
  }
  40% {
    clip-path: polygon(0 28%, 100% 28%, 100% 79%, 0 79%);
  }
  50% {
    clip-path: polygon(0 88%, 100% 88%, 100% 15%, 0 15%);
  }
  60% {
    clip-path: polygon(0 80%, 100% 80%, 100% 72%, 0 72%);
  }
  70% {
    clip-path: polygon(0 9%, 100% 9%, 100% 88%, 0 88%);
  }
  80% {
    clip-path: polygon(0 62%, 100% 62%, 100% 18%, 0 18%);
  }
  90% {
    clip-path: polygon(0 44%, 100% 44%, 100% 54%, 0 54%);
  }
  100% {
    clip-path: polygon(0 76%, 100% 76%, 100% 37%, 0 37%);
  }
} */




@keyframes flicker-in {
  0% {
    opacity: 0.965;
  }
  10% {
    opacity: 0.13;
  }
  20% {
    opacity: 0.905;
  }
  30% {
    opacity: 0.01;
  }
  40% {
    opacity: 0.86;
  }
  50% {
    opacity: 0.13;
  }
  60% {
    opacity: 0.91;
  }
  70% {
    opacity: 0.04;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flicker-out {
  0% {
    opacity: 0.14;
  }
  10% {
    opacity: 0.97;
  }
  20% {
    opacity: 0.45;
  }
  30% {
    opacity: 0.95;
  }
  40% {
    opacity: 0.12;
  }
  50% {
    opacity: 0.84;
  }
  60% {
    opacity: 0.3;
  }
  70% {
    opacity: 0.825;
  }
  100% {
    opacity: 0;
  }
}
@media all and (max-width: 600px) {
  #image-container {
    right: 50%;
    transform: translateX(50%);
    transition: all 0.3s linear;
  }
}