The effects in my master page messes everything

Question

When I try to activate any effect on a picture in my master page it just messes the whole order of the page and just ruins it. How can I fix it?

I just want a cool effect on my website.

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}

.glitch {
  position: relative;
  overflow: hidden;
}

.glitch img {
  position: relative;
  z-index: 1;
  display: block;
}

.glitch__layers {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.glitch__layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url(https://images.unsplash.com/photo-1561019733-a84b4e023910?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);
  background-repeat: no-repeat;
  background-position: 0 0;
}

.glitch__layer:nth-child(1) {
  transform: translateX(-5%);
  animation: glitch-anim-1 2s infinite linear alternate;
}

.glitch__layer:nth-child(2) {
  transform: translateX(3%) translateY(3%);
  animation: glitch-anim-2 2.3s -.8s infinite linear alternate;
}

.glitch__layer:nth-child(3) {
  transform: translateX(5%);
  animation: glitch-anim-flash 1s infinite linear;
}

@keyframes glitch-anim-1 {
  0% {
    clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
  }
  10% {
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  20% {
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  30% {
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  40% {
    clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
  }
  50% {
    clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
  }
  60% {
    clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
  }
  70% {
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  80% {
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  90% {
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  100% {
    clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
  }
  15% {
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  25% {
    clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
  }
  30% {
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  45% {
    clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
  }
  50% {
    clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
  }
  65% {
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  75% {
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  80% {
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
  }
  95% {
    clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
  }
  100% {
    clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
  }
}

@keyframes glitch-anim-flash {
  0% {
    opacity: .2;
  }
  30%,
  100% {
    opacity: 0;
  }
}

<div class="glitch">
  <img src="https://images.unsplash.com/photo-1561019733-a84b4e023910?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" alt="">
  <div class="glitch__layers">
    <div class="glitch__layer"></div>
    <div class="glitch__layer"></div>
    <div class="glitch__layer"></div>
  </div>
</div>