<div class="glitch-container">
      <h1>Welcome to the Glitch Zone</h1>
  </div>
.glitch-container {
  position: relative;
  max-width: 600px;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: #00BFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


h1{
  text-align: center;
  font-size: 32px;
  color: #ff0037;
  position: absolute;
  left: 0; 
  right: 0;
  margin-left: auto; 
  margin-right: auto;
  transform: translate(0px, 150px);
  display: block;
  animation: glitch-animation .1s linear infinite;
}



@keyframes glitch-animation {
  0%{
    top: 0; 
    left: 0;
    mix-blend-mode: multiply;
  }
  20%{
    top: -5px; 
    left: -5px;
    mix-blend-mode: difference;
  }
  40% {
    top: 5px; 
    left: 5px;
    mix-blend-mode: normal;
  }
  60% {
    top: -5px; 
    left: 5px;
    mix-blend-mode: multiply;
  }
  80% {
    top: 5px; 
    left: -5px;
    mix-blend-mode: difference;
  }
  100% {
    top: 0px; 
    left: 0px;
    mix-blend-mode: normal;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.