.static:after {
  animation: grain 8s steps(10) infinite;
  background-image: url(images/static.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 1;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events: none;
}

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}
   .text, .text >* {

   }
   .text {
      >* {
         animation: giggle 1s ease infinite;
         
      }
      .r {
         color:#f00;
         left:-0.5px;
      }
      .g {
         color:#0f0;
         animation-delay:-0.67s;
      }
      .b {
         color:#00f;
         animation-delay:-0.33s;
         left:0.5px;
      }
   }


@keyframes giggle {
   0%, 100% {
      transform:translate(-50%,-50%) translateY(-2px);
   }
   50% {
      transform:translate(-50%,-50%) translateY(2px);
   }
}
@keyframes lines {
   0% {
      background-position:0px 0px;
   }
   100% {
      background-position:0px 25px;
   }
}